我正在设计一组要打印的
HTML页面,我希望页面的元素最终达到相同的比例.例如,有一类div,宽度定义为200px宽,出现在几页上.当每个页面打印时,我希望它的尺寸显示为相同的尺寸(适用于例如切割和叠加).
我正在使用一些在Chrome中最好的东西(主要是CSS缩放规则,可以在其他地方使用较小的元素),所以我希望继续使用Chrome. (这在Firefox中更容易,因为它在打印对话框中具有明确的比例.)但是,在Chrome上,似乎在不同页面打印时保持相同的元素一致的大小是不容易的.
Chrome的PDF生成(这是从Chrome打印的内容),似乎选择一些部分来定义页面的宽度,并根据该页面的尺寸缩放页面的其余部分.或者也可以尝试将页面大小设置为在一页上适合“最佳”元素数量.如果每个页面的外框框架元素在所有情况下都不一样,那么屏幕尺寸为200px的元素似乎可以从3-4厘米到1.5-2厘米或更小的东西出来.
只使用@page大小没有帮助：我有这个CSS,它没有任何区别：
@media print {
@ page size: 297mm 210mm
}
有没有人有任何想法如何使事情打印出一致的大小？
我可以应用的一个极端的解决方法是使它们成为一个大HTML页面的所有部分,并使用Javascript将某些部分标记为唯一要打印的部分…我甚至不确定是否可以工作,在几个不同的页面上,更敏锐的事情.还有什么其他想法吗？
解决方法
我找到了一个解决方案.关键是要确保在每个文档中,Chrome将元素分解为打印的“逻辑页”大小相同.例如.如果一个文档有大量的200x200px的正方形,而Chrome决定将它们分成5×4矩形以打印横向,那么您需要确保Chrome会将其他一致的文档分割成大小为1000×800像素的元素.
对于只是多个跨度或内嵌块的序列的文档,只需要将div设置为您所选择的宽度(1100px)即可,并确保该div在打印预览中占用整个页面宽度.然后只需确保你的CSS包含以下内容：
@media print {
@page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
如果这还不够,那么把所有内容放在一个或多个固定大小的div(宽度：1100px; height：800px; overflow：hidden;)中,这样做就是强制Chrome分裂成你想要的页面因此在打印时保持元件的大小相同).
