无需上传、100% 本地处理、无需账户

HTML 转 PDF

粘贴 HTML、选择页面尺寸并下载 PDF,一切都在浏览器中渲染。

HTML 转 PDF 的工作原理

HTML 转 PDF 工具获取你粘贴到编辑器中的 HTML 标记,使用 DOMPurify 净化以去除脚本和不安全属性,使用 html2canvas 在离屏画布上渲染,并使用 jsPDF 将结果编码为 PDF。整个管道在浏览器标签页内运行,没有任何 HTML 代码或渲染输出传输到任何服务器。这使其适合转换包含你不希望粘贴到在线服务中的个人数据的 HTML 片段。

在依赖此工具之前,请了解输出格式。PDF 页面是光栅图像,而非矢量文本。输出中的文本不可选择、不可搜索、也无法重排。通过 URL 引用的外部资源受浏览器 CORS 策略阻止,无法加载。内联样式和嵌入的 CSS 有效,但使用自定义网络字体或高级 CSS 网格的复杂版式可能无法准确渲染。对于完整网页的忠实文档转换,在服务器端运行的无头浏览器是更合适的工具。

HTML 转 PDF 的分步使用说明

  1. 将 HTML 标记粘贴到编辑器区域。
  2. 可选择调整页面大小(A4 或 Letter)和方向。
  3. 点击转换;DOMPurify 净化 HTML,html2canvas 渲染它。
  4. 等待 jsPDF 将画布输出编码为 PDF 页面。
  5. 下载 PDF。

常见使用场景

  • 你在浏览器中从本地模板生成了 HTML 发票,想要一份 PDF 副本而不必将其发送给转换服务。
  • 从 API 数据构建的简单 HTML 报告需要保存为 PDF 用于归档,粘贴 HTML 并在本地转换。
  • 你编写了一个带样式的 HTML 邮件模板,想预览打印为 PDF 后的外观。
  • 开发者在测试期间需要从 HTML 片段快速生成 PDF,无需搭建服务器端无头浏览器。

常见问题

为什么输出 PDF 中的文本不可选择?

转换管道使用 html2canvas 将 HTML 渲染为画布位图,然后使用 jsPDF 将该位图编码为 PDF 页面中的图像数据。输出是光栅图像,不是文本层。如果你需要有可选文本的 PDF,你需要服务器端的无头浏览器(如 Puppeteer),而此工具特意避免了这一点以保持本地处理。

为什么我的 HTML 中的图像没有出现在 PDF 中?

从外部 URL 加载的图像受浏览器 CORS 策略约束。如果图像服务器没有发送宽松的 CORS 标头,html2canvas 无法读取像素数据,图像槽会渲染为空白。直接嵌入 HTML 中的内联 base64 编码图像或同源图像不受此限制。

我粘贴的 HTML 会发送到服务器吗?

不会。HTML 在整个过程中保存在浏览器内存中。DOMPurify 在客户端净化它,html2canvas 在客户端渲染它,jsPDF 在客户端编码 PDF。没有任何内容离开浏览器标签页。

DOMPurify 净化会删除什么?

DOMPurify 删除 script 标签、onclick 和 onload 等事件处理器属性、javascript: URL,以及其他可能执行代码的构造。它保留结构和样式标记,因此渲染输出外观相同,但可以安全地插入文档上下文中。

我可以转换完整的网页 URL 而不是粘贴 HTML 吗?

不可以。该工具处理你直接粘贴的 HTML 标记。加载 URL 需要获取页面,这对大多数网站会遇到 CORS 限制,并且会涉及网络请求,使操作脱离本地处理模式。