ToolConvoyToolConvoyv2.6
DOC

HTML 转 PDF — 在浏览器中将 HTML 文件转为 PDF

将 HTML 文件或代码片段转为 PDF。保留样式、分页符和打印规则,全部在浏览器中完成。无上传、无限制。

● 本地运行 · 文档永不离开设备页面加载以来工具发出的网络请求:0 次

HTML to PDF

Convert HTML files to PDF documents. Works entirely in your browser — no uploads, no limits.

将您的 HTML 文件拖到此处

或点击浏览(最大 50MB)

HTML 转 PDF 是那种多年来出现过十几种方案、却没有一种称得上完美的问题。难点在于 HTML 是流动的、响应式的媒介 —— 内容会回流以适配视口,作者把布局决策委托给浏览器 —— 而 PDF 是固定坐标的媒介,每个字形在确切的页面上有确切的位置。一个好的 HTML 转 PDF 工具需要像浏览器为屏幕渲染那样做同样的布局决策,再把所有内容钉到纸张能承载的坐标网格上。本工具使用的渲染管线与驱动 Chrome 打印对话框的相同,这事实上就是 Web 上该问题的参考实现。

HTML 转 PDF 中「不那么显然」的一点是打印样式表。大多数手写的 HTML 都带有 @media print 代码块,用来隐藏导航、移除背景并为纸面重新排版。当这个代码块存在时,PDF 输出干净且可预期。当它不存在时,PDF 输出会包含屏幕上所有可见的内容 —— 侧边栏、粘性头、现在变成静态的悬停效果、冻结在第零帧的动画。HTML 转 PDF 正确的准备方式是:要么编写打印样式表,要么添加 ?print 参数,在转换前换成打印友好的版本。

最终的交接:如果目标是忠实地渲染现有网页,先编写打印样式表 —— 几十行 CSS 隐藏那些不该出现在纸面上的部分。如果目标是从聊天或邮件里快速转换一段 HTML 片段,本工具在几秒钟内就能用屏幕布局生成可用的 PDF。如果目标是对一个网页做长期归档,把原始 HTML 和资源与 PDF 一起保存 —— HTML 可搜索、可编辑、便于版本控制,而 PDF 只是转换时刻冻结的一张快照。

广告

使用方法

  1. 粘贴 HTML 或加载文件

    把原始 HTML 粘贴到编辑器中,加载一个 .html 文件,或指向一个 URL(当网络允许时)。工具保留源文件的样式,出于安全会去除脚本,能访问到的外部 CSS 会被内联。

  2. 选择页面设置

    选择 A4 或 Letter,纵向或横向,以及一种边距预设。打开「遵循 CSS `@page` 规则和源文件中 `page-break-before` 属性」的选项 —— 大多数手写 HTML 都用它们来实现自然分页。

  3. 下载 PDF

    渲染器对 HTML 进行排版,生成的 PDF 与 Chrome 打印对话框对同一源文件的输出一致。页数和文件大小会显示在下载按钮上方。

常见问题

会遵循 CSS @media print 规则吗?

会 —— 渲染器排版时使用打印样式表。如果你的 HTML 中有 `@media print` 代码块隐藏导航或为打印重新排版,这些规则会生效。如果没有打印样式表,则使用屏幕样式表,输出可能包含导航、侧边栏和其他你不想出现在纸面上的元素。

外部样式表和图片会被加载吗?

可通过 HTTPS 访问的外部 CSS 文件在渲染前被获取并内联。可通过 HTTPS 访问的图片会被加载。浏览器上下文无法访问本地文件路径和 `file://` URL —— 把 HTML 放到服务器上,或在转换前内联资源。

会在页面中执行 JavaScript 吗?

默认情况下,出于安全和保持输出确定性考虑,脚本在渲染前会被去除。单次无 JS 的渲染生成稳定的 PDF;如果你的页面依赖 JS 来排版(React 应用、Vue SPA),渲染的是水合前的静态 HTML。

可以控制分页吗?

可以 —— 在任意元素上添加 `page-break-before: always`(或现代的 `break-before: page`)即可在该处强制分页。渲染器同时支持传统 CSS 2.1 语法和 CSS Fragmentation Module Level 3 语法。

PDF 中使用什么字体?

使用渲染机器上可用的系统字体。通过 `@font-face` 从可访问 URL 托管的 Web 字体会被下载并嵌入。如果字体不可用,浏览器会替换为度量等价的回退字体 —— 布局可能会略有偏移。

限制说明

  • 不执行 JavaScript脚本在渲染前会被去除。依赖 JS 渲染内容的 SPA(React、Vue、没有 SSR 的 Angular)会生成水合前空壳的 PDF。服务端渲染的 HTML 或静态页面才是合适的输入。
  • 外部资源必须可访问外部 CSS、图片和字体在渲染过程中从网络获取。托管在身份验证之后、`localhost` 上或防火墙之后的页面会产生不完整的输出。在转换前内联资源或将它们托管到公开 URL。
  • 默认存在打印样式表如果没有 `@media print` 代码块,会使用屏幕布局,输出可能包含不适合纸面的导航、侧边栏或首屏大图。在转换前添加打印样式或去除不需要的元素。

平台说明

macOS
Safari 的「文件 > 导出为 PDF」使用的渲染器与本工具类似。当源 HTML 在聊天、邮件或 CMS 导出中,又不值得为打开 Safari 打印对话框花时间时,本浏览器工具是合适选择。
Windows
Microsoft Edge 的打印对话框使用与本工具相同的 Chromium 渲染器。当源是邮件或 CMS 导出的 HTML,又希望跳过 Edge 直接快速转换时,本浏览器工具是合适选择。
Linux
命令行场景下,`wkhtmltopdf input.html output.pdf` 和 Chromium 无头模式(`chromium --headless --print-to-pdf=output.pdf input.html`)是最接近的等价物。本浏览器工具适合对从聊天或邮件粘贴来的 HTML 进行一次性转换。
Web
完全在客户端运行。页面加载后离线可用。对无法安装命令行工具或无头浏览器的受限环境很有用。
广告
广告