如何使Chrome页面的打印尺寸与Chrome一致？

Question

我正在设计一组要打印的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将某些部分标记为要打印的唯一部分...我甚至不确定它是否有效,并且它' d在几个不同的页面上比较干净.还有其他想法吗？

Answer 1

我找到了解决方案.关键是要确保在每个文档中,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分割成所需页面的方法(因此在打印时保持元素大小相同).

Answer 2

允许不同的尺寸,但控制每个尺寸的边距和设计!

第一次回答时,我使用的是Chrome 32.0.1700.107 m

为页面大小建立的W3 CSS3标准可以直接从打印界面上的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.

Answer 3

此外,如果纸张尺寸为A4和protrait,您也可以使用它

@page {
    size: A4 landscape;
}

这适用于Chrome