什么是HTML 转 PDF？

将 HTML 标记转换为可下载的 PDF。支持 CSS 样式、图片、表格和自定义页面尺寸。适合生成发票、报告，或将格式化的网页内容离线保存。

纸张可选 A4、A3、Letter 或 Legal,方向纵横可切换,页边距从 0 到 20mm 可调。还能给文件加密码,或在页脚加上页码。内联 CSS、Base64 图片、表格都能正确渲染。底层使用 html2pdf.js + html2canvas,因此带网页字体或复杂样式的页面在 PDF 里可能跟预览略有差异。

使用方法

1. 第一步 — 在编辑器中粘贴或输入 HTML 内容，实时预览将显示 PDF 的最终效果。
2. 第二步 — 配置页面设置：选择纸张大小（A4、A3、Letter、Legal）、方向（纵向/横向）和页边距。还可以设置密码或添加页码。
3. 第三步 — 点击「生成 PDF」创建文档，然后直接下载到设备。

何时使用

• 把 HTML 发票或收据生成 PDF 后再发邮件给客户。
• 把带图表和表格的报告存档成便携 PDF 备份。
• 把网页内容做成讲义,供线下课程或工作坊打印。

结果

一位自由职业者将包含公司 Logo、分项表格和合计金额的发票 HTML 粘贴进来，设置 A4 纵向并留 20 毫米页边距，下载专业 PDF 文件后发送给客户。

常见问题

为什么导出的 PDF 跟实时预览长得不一样?

PDF 是先通过 html2canvas 把页面绘制成一张图,再封装成 PDF。如果 webfont 没完全加载、fixed 定位元素或 CSS filter 出现时,效果就可能跟预览不一致。

可以引用别人服务器上的图片吗?

前提是对方服务器开放了 CORS。如果没开,html2canvas 读不到像素,PDF 里就会是空白。解决方案:把图片下载下来,以 Base64 嵌入,或者放到同源服务器上。

怎么控制分页?

在希望开始新一页的元素上加 CSS 规则 page-break-before: always(或 page-break-after)。表格行可以加 page-break-inside: avoid,让一行不被跨页切断。

PDF 里的文字能选中复制吗?

通常不能。因为渲染器把页面通过 canvas 拍平,文字最终变成位图。有些方案会另叠一层不可见的文字层供选中,但本工具产出的是栅格化 PDF——能看清楚,但不一定能选中复制。

粘贴的 HTML 有大小限制吗?

实测上限大约是几百 KB 的标记或者 10-15 页。再长就容易爆内存,因为整个 DOM 要先被画成一张大 canvas 再切页。

相关工具