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

Answer 1

我找到了解决方案。关键是要确保在每个文档中，＆＃34;逻辑页面＆＃34; 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 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。

Answer 3

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

@page {
    size: A4 landscape;
}

这适用于Chrome

Answer 4

您的规则媒体查询结构不正确。试试：

@media print {  
    @page {  
      size:297mm 210mm;  
    }  
}

至少提供正确的语法。对于size属性，它从css2.1中删除，浏览器支持也各不相同。您可以随时设置width，margin和/或padding

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

4 个答案:

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