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

How to make HTML pages print at a consistent size from Chrome?

提问by AlexC

I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide appears on each of several pages. I want it to appear precisely the same size when each page is printed (suitable for, e.g., cutting out and superimposing).

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

I'm using a few things that work best in Chrome (mainly the CSS zoom rule to have smaller copies of elements elsewhere), so ideally I'd like to keep using Chrome. (This would be easier in Firefox, because it has an explicit scale ratio in the print dialog.) But it seems that on Chrome, keeping the same element a consistent size when printedfrom different pages is far from easy.

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

Chrome's PDF generation (which is what printing from Chrome does under the hood) appears to pick some section to define the page's width, and scale the rest of the page based on that. Or perhaps it tries to set the page size to fit an "optimal" number of elements on one page. If the outside framing elements of each page aren't the same size in all cases, then it seems like elements with screen size 200px can come out anything from 3-4 cm down to 1.5-2cm or maybe smaller.

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

Just using @page sizedoesn't help: I've got this CSS and it's not making any difference:

只是使用@page size没有帮助：我有这个 CSS 并且它没有任何区别：

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

Does anyone have any thoughts for how to get things to print out with consistent sizes?

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

One extreme workaround I could apply is to make them all parts of one big HTML page, and use Javascript to mark certain parts as the only parts to be printed... I'm not even sure if that'd work, and it'd be rather cleaner to keen things on a few different pages. So are there any other ideas?

我可以应用的一种极端解决方法是让它们成为一个大 HTML 页面的所有部分，并使用 Javascript 将某些部分标记为唯一要打印的部分......我什至不确定这是否可行，它在几个不同的页面上对敏锐的事物进行更清晰的处理。那么还有其他想法吗？

采纳答案by AlexC

I found a solution. The key is to ensure that in each document, the "logical page" that Chrome splits elements into for printing is the same size. E.g. if one document has lots of 200x200px squares and Chrome decides to group them in a rectangle 5x4 to print landscape, then you need to make sure that Chrome will print every other consistent document split into elements of size 1000x800px.

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

For documents that are simply a number of spans or inline-block divs in sequence, it suffices to have a div set to exactly your chosen width (1100px), and ensure that that div occupies the full page width in print preview. Then just make sure your CSS contains something like:

对于仅按顺序包含多个跨度或内联块 div 的文档，将 div 设置为您选择的宽度（1100 像素）就足够了，并确保该 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 */
  }
}

If this isn't sufficient, then putting everything inside one or more divs with fixed size (width: 1100px; height: 800px; overflow: hidden;) does the job, as a way to force Chrome to split into the pages you want (and therefore keep elements the same size when printed).

如果这还不够，那么将所有内容放在一个或多个具有固定大小 ( width: 1100px; height: 800px; overflow: hidden;) 的div 中即可完成这项工作，作为一种强制 Chrome 拆分为您想要的页面的方法（因此在打印时保持元素的大小相同）。

回答by DavidTaubmann

Allow different sizes, but control each size's margins and design!

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

When first answering I was using Chrome 32.0.1700.107 m

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

The W3 CSS3 standard established for page sizesworks great with the "SAVE AS PDF" option directly from Chrome's plugin on the printing interface.

为页面大小建立的W3 CSS3 标准与打印界面上直接来自 Chrome 插件的“另存为 PDF”选项配合得很好。

I have had years of trouble with different interfaces and go-around solutions for different proyects (for example: generating PDF's directly from server which was too heavy in processing and messy in code, or telling users to use windows printing interface, etc). This one is a great solution for me and seems to be definitive!

多年来，我在不同的界面和针对不同项目的解决方案方面遇到了麻烦（例如：直接从服务器生成 PDF 处理繁重且代码混乱，或者告诉用户使用 Windows 打印界面等）。这对我来说是一个很好的解决方案，似乎是确定的！

Here's a perfect example of the same page, with options for A4-size and Letter-size printing margins:

这是同一页面的完美示例，其中包含 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;
    }
 }

You can replicate as many times as you wish using different paper sizes. Extra values (colors, hidden elements, etc.) would go outside @page.

您可以根据需要使用不同的纸张尺寸进行多次复制。额外的值（颜色、隐藏元素等）会在@page 之外。

回答by G.Georgiou

In addition, if the paper size is A4 and protrait you can also use this

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

@page {
    size: A4 landscape;
}

This operates in Chrome

这在 Chrome 中运行

回答by albert

your at-rules media queries are structured incorrectly. try:

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

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

that at least provides the correct syntax. as for the sizeproperty, it was dropped from css2.1 and browser support varies. you could always set width, margin, and/or padding

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