HTML 转 PDF：样式一起带过去
来自 FreePDF 团队 ·
把一个 .html 文件发给别人，其实挺不牢靠：在你这台电脑上好好的，到了对方那儿样式没了，或者换个浏览器排版就变了，再或者干脆被邮箱当附件拦下来。转成 PDF 就把这一页定住了——一个文件，在哪打开都一样，打印出来也就是看到的样子。
什么能带过去，什么带不过去
上传 .html 或 .htm 文件，它会像浏览器准备打印时那样被渲染成 PDF。转之前有三件事值得先知道：
- 文件里的 CSS 会生效。写在
<style>块里或style=属性里的东西都会带过去：字体、颜色、边框、表格、背景。 - JavaScript 不会执行。页面就按文件里现在的样子渲染。如果某个图表或表格是加载时由脚本画出来的，PDF 里拿到的就是那个空壳容器。
- 相对路径找不到东西。上传上来的文件没有自己的网址，也就没有「相对于哪里」可言，所以
<img src="images/logo.png">或<link href="style.css">指不到任何地方。写成完整的https://地址则会正常抓取。
最后一条的解法是做成单文件页面：把 CSS 粘进 <style> 块，图片要么用完整网址，要么直接内嵌成 data: URI。多数会生成 HTML 报表的工具，以及浏览器「网页另存为 → 单一文件」，本来就是这么干的。
纸张和页边距可以用 CSS 控制
既然是按打印输出来渲染的，打印相关的 CSS 就都算数。如果 HTML 是你自己生成的，几条规则就够用了：
@page { size: A4; margin: 20mm; }定纸张尺寸和页边距。用美制信纸的把A4换成Letter。- 给标题加
break-before: page，每一章就从新的一页开始。 - 给表格或卡片加
break-inside: avoid，它就不会被切成跨两页。 @media print里的规则同样生效，所以导航栏、横幅这些你本来就不想打印出来的东西，不会进 PDF。
什么时候该用浏览器自带的打印
这话得说明白，因为它经常才是对的答案：如果你想存的是一个活的网页，那就直接打开它、打印成 PDF。浏览器手里已经有加载好的页面——图片在、脚本跑过了、你也登录着，这些东西是一个上传的文件里根本不包含的。
在这里转文件，适合的是你手上已经有一个自包含的 .html：邮件里的账单、脚本导出的报表、某个工具的导出文件、存下来的收据——而且你想要一份干净的 PDF，边上不带浏览器自己盖的页眉页脚和页码。它还有一个好处是可复现：同一个文件在任何机器上转出来都是同一份 PDF，而打印对话框里那一堆各人各样的设置做不到这点。
还有一种情况：文档是你自己要写的，而不是拿来转的。那用 Markdown 能整个绕开这些麻烦——没有 CSS 要操心，也没有资源文件要追。
常见问题
能直接给它一个网址吗？
不能，它转的是你上传的文件。先把页面存下来（Ctrl+S / Cmd+S，浏览器如果有「单一文件」选项就选它），再上传。要是页面在登录之后才能看到，那自己保存本来也是唯一能把内容取出来的办法。
转出来的 PDF 没有样式，怎么回事？
基本上都是样式表放在单独的文件里。HTML 里引的是 style.css，你上传的只有 HTML，那就没东西可加载。用文本编辑器打开文件，把 CSS 挪进 <head> 里的 <style> 块，再转一次就好了。