Chrome 网页打印中的宽度控制
source link: https://zhiqiang.org/it/print-width-in-chrome.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Chrome 网页打印中的宽度控制
最近碰到这个问题，我需要将网页打印成 PDF 文件。Chrome 可直接将网页保存（打印）为 PDF （无需安装 Adobe ），但式样跟网页上显示的截然不同。我测试了一下用法，了解了其中的一些原理和解决方法，总结如下。
Chrome 保存为 PDF 的界面上只有很少几个选项：
这几个选项都浅显易懂。但需要注意的是，这里并没有让选「纸张大小」。Chrome 在保存为 PDF 文件时，默认纸张大小是 A4。若布局为纵向，显示大小为 210mm×297mm ；若布局为横向，显示大小为 297mm×210mm。
这时候需提到一个 DPI （ Dot Per Inch ）的指标。Windows 下的网页打印的默认 DPI 为 96dpi。按照 1 英寸=25.41mm 换算， A4 纸张可实际显示的像素宽度为 794px×1123px ，即打印网页的宽度为 794px。
实际打印还会有页边距，如果页边距为 5mm （窄边距），网页内容最大宽度约 750px ，若页边距为 19mm （默认边距），网页内最大元素分辨率约 650px。
基于此，很多网页在打印时会变形，因为打印时内容容器的宽度只有 750px 或者 650px ，但现在的网页内容大多都是基于至少 1000px 以上宽度设计的，这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。
解决办法有两个。
其一，锁定网页的宽度。
当网页宽度被指定时，页面将被自动缩放。这可以保证 PDF 文件和浏览器上显示的效果一模一样。这时候打印出的 PDF 文件仍是 A4 大小。
其二，指定打印纸张大小。
@media print {
@page {
size: 210mm 297mm; /* or size: 794px 1123px; */
size: 297mm 420mm; /* or size: 1123px 1588px; */
}
}
@page size有很多种用法，详细介绍见相关文档。通过指定不同的 size ，可以将文件打印成不同的纸张大小。这个效果和上面指定锁定网页宽度略有不同。
Q. E. D.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK