如何使HTML页面以同样大小从Chrome打印?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (243)

我正在设计一组要打印的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将某些部分标记为唯一要打印的部分......我不确定这是否可行,那么还有其他想法吗?

提问于
用户回答回答于

我找到了解决方案。关键是要确保在每个文档中,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分裂成想要的页面(并因此在打印时保持元素的大小相同)。

用户回答回答于

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

当第一次回答我使用Chrome 32.0.1700.107米为页面大小建立的W3 CSS3标准可以直接从Chrome的插件打印,界面上直接使用“SAVE AS PDF”选项。

我有多年的不同界面解决麻烦的方案(例如:生成PDF文件直接从服务器,在处理过重而凌乱的代码,或告诉用户使用打印界面窗口,等)。这对我来说是一个很好的解决方案,确切的说是有效的。

以下是同一页面的完美示例,可选择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之外。

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 发条丶魔灵1

    6 粉丝525 提问3 回答
  • 人生的旅途

    10 粉丝484 提问3 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励