如何从 Chrome 以一致的大小打印 HTML 页面？

Posted 2023-03-06

【中文标题】如何从 Chrome 以一致的大小打印 HTML 页面？

【英文标题】：How to make HTML pages print at a consistent size from Chrome?

【发布时间】：2013-03-14 06:23:32

【问题描述】：

我正在设计一组要打印的 html 页面，并且我希望页面中的元素最终具有相同的比例。例如，有一类 div 的宽度被定义为 200px 宽出现在几个页面中的每一个上。我希望它在打印每一页时显示完全相同的尺寸（适用于，例如，剪切和叠加）。

我正在使用一些在 Chrome 中效果最好的东西（主要是 CSS 缩放规则，以便在其他地方拥有较小的元素副本），所以理想情况下我想继续使用 Chrome。 （这在 Firefox 中会更容易，因为它在打印对话框中有明确的比例。）但似乎在 Chrome 上，在从不同页面打印时保持相同的元素大小一致远非简单。

Chrome 的 PDF 生成（这是从 Chrome 打印在引擎盖下所做的）似乎选择了一些部分来定义页面的宽度，并在此基础上缩放页面的其余部分。或者它可能会尝试将页面大小设置为适合一页上“最佳”数量的元素。如果每个页面的外部框架元素在所有情况下都不是相同的尺寸，那么屏幕尺寸为 200 像素的元素似乎可以从 3-4 厘米到 1.5-2 厘米或更小。

仅使用 @page size 没有帮助：我有这个 CSS，但没有任何区别：

@media print 
  @ page size: 297mm 210mm 

是否有人对如何以一致的尺寸打印出东西有任何想法？

我可以应用的一个极端解决方法是让它们成为一个大 HTML 页面的所有部分，并使用 javascript 将某些部分标记为唯一要打印的部分......我什至不确定这是否可行，在几个不同的页面上热衷于事物会更干净。那么还有其他想法吗？

【问题讨论】：

基本错误是“@”和“page”之间的空格，以及缺少的“”......也许最后的分号也可以。尽管如此，我还是为这个案例创建了一个完整的答案，因为提到的解决方案适用于不同的页面尺寸，具体取决于用户在其打印机中配置的纸张，您甚至可以使用 w3 中提到的标准设置尺寸和更多内容。

【参考方案1】：

如果您想打印到 pdf，您可以使用 https://make.cm，因为他们可以为您处理服务器负载并消除正确渲染内容的复杂性。我将它用于一个项目，它比处理 chrome 打印到 PDF 系统要容易得多

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案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。

【讨论】：

不过，这并不能完全解决我想要的问题。如果我有一个包含两个 200 像素×200 像素 div 的文档，另一个包含 20 个 div 的文档，我想将它们都打印出来，并让所有内容的大小都相同。 Chrome 的默认 PDF 生成可能没有该结果。这就是为什么我的解决方案有一个“整页”宽度的 div。

【参考方案3】：

另外，如果纸张大小是A4和protrait你也可以用这个

@page 
    size: A4 landscape;

这在 Chrome 中运行

【讨论】：

这是@page size 选项的替代方案，是的。但这无助于确保两个不同的文档都以相同的大小打印一个 200px 的 div。这样做的方法是确保所需整页大小（例如 1100 像素）的一个 div 始终跨越整个页面宽度，正如我在回答中所描述的那样。

【参考方案4】：

我找到了解决方案。关键是要确保在每个文档中，Chrome 将元素拆分为打印的“逻辑页面”大小相同。例如。如果一个文档有很多 200x200px 的正方形，并且 Chrome 决定将它们分组在一个 5x4 的矩形中以打印横向，那么您需要确保 Chrome 将打印所有其他一致的文档，拆分成大小为 1000x800px 的元素。

对于仅包含多个 span 或按顺序排列的内联块 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 拆分为您想要的页面的方法（因此保持元素相同打印时的大小）。

【参考方案5】：

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

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

至少提供了正确的语法。至于 size 属性，它是从 css2.1 中删除的，并且浏览器支持有所不同。你总是可以设置width、margin和/或padding