如何使Chrome页面以一致的大小打印HTML页面？ [英] How to make HTML pages print at a consistent size from Chrome?

问题描述

我正在设计一组要打印的HTML页面，我想要页面的元素以相同的比例结束。例如，有一个div类，其宽度定义为200px宽出现在几个页面的每一页上。我希望每个页面打印时都能显示完全相同的大小（适合于，例如，剪切和叠加）。

我使用一些工作最好在Chrome（主要是CSS缩放规则有更小的副本的元素在其他地方），所以理想情况下，我想继续使用Chrome。 （这在Firefox中会更容易，因为它在打印对话框中有一个显式的缩放比率。）但是，在Chrome上，保持同一元素在打印简单。

Chrome的PDF生成（这是Chrome在打印机下进行的打印）显示为选择一些部分来定义网页的宽度，并根据那。或者也许它试图设置页面大小以适合一页上的最佳数量的元素。如果每个页面的外部框架元素在所有情况下都不是相同的大小，那么看起来像屏幕尺寸为200像素的元素可以从3-4厘米到1.5-2厘米或更小。

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

  @media print {
 @页面大小：297mm 210mm 
} 
  
 
 
 
有没有人想过如何以一致的尺寸打印出来？
 
 
 
我可以应用的一个极端的解决方法是使它们的一个大的HTML页面的所有部分，并使用Javascript来标记某些部分作为唯一的部分打印...我甚至不确定这是否会工作， d在几个不同的页面上敏锐的东西更清洁。 
解决方案
我找到了一个解决方案。关键是要确保在每个文档中，Chrome将元素拆分为用于打印的逻辑页大小相同。例如。如果一个文档有大量的200x200像素的正方形，Chrome决定将它们分组在一个矩形5x4打印横向，那么您需要确保Chrome将打印每个其他一致的文档分割为大小为1000x800px的元素。 
 
 
 
对于只是多个span或inline-block div的文档，只要将div设置为您选择的宽度（1100像素）即可，并确保该div在打印预览中占据整个页面宽度。然后只需确保您的CSS包含以下内容：
  @media print {
 @page {
 size ：297mm 210mm; / * landscape * / 
 / *你也可以在这里指定边距：* / 
 margin：25mm; 
 margin-right：45mm; / *与A4和Letter兼容* / 
} 
} 
  
如果这还不够，那么将所有内容放在一个或多个具有固定大小（ width：1100px; height：800px; overflow：hidden; ）的div中，一种强制Chrome分割为所需网页（因此在打印时保持元素大小相同）的方法。
 
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).

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 printed from different pages is far from easy. 

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.

Just using @page size doesn't help: I've got this CSS and it's not making any difference:
@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?
解决方案
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. 

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:
@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).

                        
这篇关于如何使Chrome页面以一致的大小打印HTML页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！