35

我正在设计一组要打印的 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 将某些部分标记为唯一要打印的部分......我什至不确定这是否可行，而且它d 在几个不同的页面上更清晰地热衷于事物。那么还有其他想法吗？

4

5 回答 5

26

我找到了解决方案。关键是要确保在每个文档中，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 拆分为您想要的页面的方法（因此在打印时保持元素大小相同）。

于 2014-08-11T16:32:29.023 回答
10

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

第一次回答时，我使用的是 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。

于 2014-02-17T18:13:29.197 回答
5

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

@page {
    size: A4 landscape;
}

这在 Chrome 中运行

于 2016-04-11T07:30:48.647 回答
1

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

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

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

于 2013-03-28T08:36:32.027 回答
0

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

于 2022-01-26T00:14:57.133 回答