我正在设计一组要打印的HTML页面,我希望页面的元素最终达到相同的比例。例如,有一类div,其宽度定义为200px宽,出现在几个页面的每一页上。我希望它在每页打印时看起来大小相同(适用于例如剪切和叠加)。
我正在使用一些最适合Chrome的功能(主要是CSS缩放规则,以便在其他地方使用较小的元素副本),所以理想情况下我想继续使用Chrome。 (这在Firefox中会更容易,因为它在打印对话框中具有明确的缩放比例。)但是在Chrome上,从不同页面打印时保持相同元素的一致大小远非简单。
Chrome的PDF生成(这是从Chrome进行打印的内容)似乎会选择一些部分来定义页面的宽度,并根据该部分缩放页面的其余部分。或者它可能尝试将页面大小设置为适合一页上的“最佳”元素数。如果每个页面的外部框架元素在所有情况下都不是相同的尺寸,那么屏幕尺寸为200px的元素可能会出现从3-4厘米到1.5-2厘米或更小的任何内容。
仅仅使用@page size
并没有帮助:我已经拥有了这个CSS而且它没有任何区别:
@media print {
@ page size: 297mm 210mm
}
有没有人对如何以一致的尺寸打印出来的东西有任何想法?
我可以应用的一个极端的解决方法是将它们作为一个大HTML页面的所有部分,并使用Javascript将某些部分标记为要打印的唯一部分......我甚至不确定它是否有效,在几个不同的页面上做事情会更加清晰。还有其他想法吗?
答案 0 :(得分:16)
我找到了解决方案。关键是要确保在每个文档中,"逻辑页面" Chrome将元素拆分为打印尺寸相同。例如。如果一个文档有大量200x200px的正方形,并且Chrome决定将它们分组为5x4的矩形以打印横向,那么您需要确保Chrome将打印所有其他一致文档分割为大小为1000x800px的元素。
对于按顺序只是多个跨距或内联块div的文档,将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 */
}
}
如果这还不够,那么将所有内容放在一个或多个具有固定大小(width: 1100px; height: 800px; overflow: hidden;
)的div中都可以完成这项工作,这是强制Chrome分割成您想要的页面的一种方式(因此打印时保持元素大小相同。
答案 1 :(得分:8)
第一次回答时,我使用的是Chrome 32.0.1700.107 m
W3 CSS3 standard established for page sizes可直接从打印界面上的Chrome插件中选择“另存为PDF”选项。
我为不同的项目提供了不同界面和复飞解决方案多年的麻烦(例如:直接从服务器生成PDF,处理过程繁重,代码混乱,或者告诉用户使用Windows打印界面等等)。这个对我来说是一个很好的解决方案,似乎是明确的!
这是同一页面的完美示例,包含A4尺寸和Letter尺寸打印边距选项:
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
}
您可以根据需要使用不同的纸张尺寸复制多次。额外的值(颜色,隐藏元素等)将超出@page。
答案 2 :(得分:5)
此外,如果纸张尺寸为A4和protrait,您也可以使用此
@page {
size: A4 landscape;
}
这适用于Chrome
答案 3 :(得分:1)
您的规则媒体查询结构不正确。试试:
@media print {
@page {
size:297mm 210mm;
}
}
至少提供正确的语法。对于size
属性,它从css2.1中删除,浏览器支持也各不相同。您可以随时设置width
,margin
和/或padding