如何把HTML转换成排版整齐的PDF

打印友好的HTML有哪些要点,哪些CSS能控制分页,以及如何避免表格被截断、图片丢失、文字太小和中文乱码等常见问题。

打开工具: HTML转PDF

按纸张宽度设计

A4 纸、页边距 20 毫米时,可用宽度为 170 毫米,约 643 个CSS像素。比这更宽的布局会被缩小,文字也会变小。图片请设置 max-width: 100%,栅格宽度使用百分比或 fr。

五行打印CSS

  • @page { size: A4; margin: 20mm; } 设置纸张和页边距。
  • h2 { break-after: avoid; } 让标题和正文不分开。
  • tr, figure { break-inside: avoid; } 避免表格行和图片被截断。
  • .chapter { break-before: page; } 每章从新页开始。
  • @media print { nav, button { display: none; } } 隐藏只在屏幕上需要的元素。

字体和图片

只装在自己电脑上的字体,在别处可能没有,请引用网页字体或使用常见字体。打印用图片建议达到每英寸 150 到 200 像素,铺满 A4 宽度的照片约需 1300 像素宽。

选择输出方式

合同、报价单和说明文档建议用“另存为PDF”,文字可搜索、链接可点击。海报、证书等需要在任何设备上都一模一样的内容,用“下载PDF”按所见即所得绘制。