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

时间:2013-03-24 20:16:56

标签: html css google-chrome printing print-css

我正在设计一组要打印的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将某些部分标记为要打印的唯一部分......我甚至不确定它是否有效,在几个不同的页面上做事情会更加清晰。还有其他想法吗?

4 个答案:

答案 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中删除,浏览器支持也各不相同。您可以随时设置widthmargin和/或padding