HTML 转 Base64：为 data URI 编码标记

如何把 HTML 编码为 Base64

1. 把标记粘贴到 输入 · 文本，或按 示例 载入一个小文档。
2. 从 输出 · Base64 复制 Base64。
3. 字符集 保持为 UTF-8，并在 data URI 或文档中声明 UTF-8（见下文）。
4. 需要 data URI 时，在前面加上 data:text/html;charset=utf-8;base64,；或者把纯 Base64 粘贴到要求它的 API 字段中。

示例分两行，<!doctype html> 加上 <h1>Hello from base64hub</h1>，编码结果是 PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+。Base64 转 HTML 可以把它还原。

示例

对 Base64 来说，€ 这样的实体只是普通文本，会原样保留；浏览器在解码之后才解析它们。以 PCFkb2N0eXBl 或 PCFET0NUWVBF 开头的字符串是 HTML 文档（<!doctype 或 <!DOCTYPE），PGh0bWw 则是 <html。

构造 data:text/html URI

完整的 data URI 由四部分组成：协议、媒体类型、可选的字符集和 Base64 标志。

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

如果 URI 中没有 charset=utf-8，文档中也没有 <meta charset="utf-8">，浏览器可能按传统编码读取这些字节，café 就会显示成 café。把 meta 标签写进 HTML，无论文档最终放在哪里都能得到保护。

典型用途：

• 在 iframe 中，<iframe src="data:text/html;base64,..."> 可以显示一个自包含的片段，无需单独的文件。如果是手写的 HTML，srcdoc 属性往往更简单，因为它完全不需要编码。
• 浏览器测试和其他自动化流程可以从 data URI 加载测试页面，不需要 Web 服务器。
• 一些邮件、PDF 渲染和文档 API 接受以 Base64 字段提交的 HTML 正文，这样引号和换行就不需要做 JSON 转义。

浏览器不允许网页把主窗口导航到 data:text/html URL，所以指向它的链接和重定向会静默失败或显示错误。iframe 不受影响。

大小与替代方案

Base64 会让标记增大约三分之一：49 字节的文档 <!doctype html><meta charset="utf-8"><p>café</p> 会变成 68 个字符。对于以 ASCII 为主的 HTML，百分号编码的 data URI 往往更短，因为只有 #、% 和非 ASCII 字节等少数字符需要转义。当标记很大、含有很多特殊字符，或要放进只接受 Base64 的字段时，Base64 是更稳妥的选择。data URI 生成器 可以为 HTML、CSS 和图片生成 data: 链接，data URI 的性能 介绍了缓存和大小方面的取舍。

在代码中把 HTML 转为 Base64

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

在浏览器中，请使用 JavaScript 中的 Base64 里介绍的 TextEncoder 方法，因为单用 btoa 会把非 ASCII 字符弄乱或直接拒绝。另见 Python 中的 Base64。

常见问题