当前位置: 首页 > 面试题库 >

使用JavaScript将HTML转换为data:text / html链接

胡鸿远
2023-03-14
问题内容

这是我的HTML:

<a>View it in your browser</a>
<div id="html">
    <h1>Doggies</h1>
    <p style="color:blue;">Kitties</p>
</div>

如何使用JavaScript来使href我的链接点的属性base64编码的网页,其来源是innerHTMLdiv#html

除了在JavaScript中之外,我基本上想在这里进行相同的转换(选中了base64复选框)。


问题答案:

数据URI的特征

数据-URI与MIME类型text/html必须是在其中一种格式:

data:text/html,<HTML HERE>
data:text/html;charset=UTF-8,<HTML HERE>

不需要Base-64编码。如果您的代码包含非ASCII字符,例如éécharset=UTF-8则必须添加。

必须转义以下字符:

  • #-Firefox和Opera将这个字符解释为哈希标记(如所示location.hash)。
  • %-此字符用于转义字符。转义此字符以确保没有副作用发生。

此外,如果要将代码嵌入锚标记中,则还应转义以下字符:

  • " and/or ' -用引号标记属性的值。
  • & -与符号用于标记HTML实体。
  • <并且>没有 进行转义 一个HTML属性中 。但是,如果您要将链接嵌入HTML,则也应将其转义(%3C and %3E

JavaScript实现

如果您不介意data-URI的大小,最简单的方法是使用encodeURIComponent

var html = document.getElementById("html").innerHTML;
var dataURI = 'data:text/html,' + encodeURIComponent(html);

如果大小很重要,则最好去除所有连续的空格(除非HTML包含<pre>element/style,否则可以安全地做到这一点)。然后,仅替换有效字符:

var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')   // <-- Replace all consecutive spaces, 2+
           .replace(/%/g, '%25')     // <-- Escape %
           .replace(/&/g, '%26')     // <-- Escape &
           .replace(/#/g, '%23')     // <-- Escape #
           .replace(/"/g, '%22')     // <-- Escape "
           .replace(/'/g, '%27');    // <-- Escape ' (to be 100% safe)
var dataURI = 'data:text/html;charset=UTF-8,' + html;


 类似资料:
  • 问题内容: 我是一名PHP开发人员,在我的一个项目中,我需要将一些HTML文档(大约30至50页)转换为PDF文档。 我的搜索找到了以下可能的解决方案。其中包括一些PHP库和一些命令行应用程序。每种都有自己的优点和缺点。 PHP库: fpdf(需要更多的转换努力) tcpdf(需要更多的转换努力) html2fpdf http://html2fpdf.sourceforge.net html2pd

  • 问题内容: 如何使用Python将PDF文件转换为HTML? 我只是在想Google会(或似乎会)对PDF文件建立索引的行为。 我的最终目标是设置Apache以显示PDF文件的HTML,因此,向该方向发展的任何事情也将不胜感激。 问题答案: 该poppler的包提供了一个实用PDF2HTML您可能能够使用。还有一个Python绑定到libpoppler。

  • 问题内容: 可以使用PHP将HTML页面转换为PDF吗?如果可以,该如何做? 具体而言,页面是动态生成的发票。所以我想使用以下命令加载它: 而且HTML输出必须转换为PDF。 任何好的库都可以。 问题答案: 如果您希望从php 创建 pdf,则pdflib将为您提供帮助(就像其他人建议的那样)。 否则,如果您想通过PHP 将 HTML页面 转换 为PDF,您将在这里发现一些麻烦。.3年以来,我一直

  • 我一直在尝试使用他们的库将html内容转换为docx,我确实在运行我的应用程序后创建了一个docx文件,但它有空白内容,而html中确实有一些内容。请检查下面的代码,我已经包含了git上AndroidDocxtoHTML示例中所有必要的库。 代码: 我不明白我得到的空白文档的代码中缺少了什么。我为java找到了这段代码,我为android修改了这段代码。有些人建议使用夜间构建jar进行xhtml转

  • 我想用iText将带有图像的html文件转换成pdf格式。我在这里提供我的消息来源。 请帮助我如何使用iText将带有图像的html文件转换为pdf格式。如果没有图像或者硬编码图像路径,我可以转换html文件。提前致谢

  • 我正在获取一个json对象,该对象如下所示: 然后,我使用模板文字追加页面上的对象,如下所示 我遇到的问题是,我需要${item.entry}来观察JSON中的html和段落中断。我该怎么做?