如何把HTML转换成排版整齐的PDF
打印友好的HTML有哪些要点,哪些CSS能控制分页,以及如何避免表格被截断、图片丢失、文字太小和中文乱码等常见问题。
按纸张宽度设计
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”按所见即所得绘制。