Question

我无法理解在将它们打印到A4尺寸纸张时如何渲染大小正确的html元素。

为了说明我的目的，我将代码简化为一个html页面，其中一个红色边框表格应为210mmx297mm（A4纸张尺寸）：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @page
      {
        size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
      }
		
      html, body 
      {
        width: 210mm;
        padding:0;
							 
        margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */				                
      }
      html
      {
         background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
      }			

      table
      {
        width:100%;
        height:297mm;
        -moz-box-sizing: border-box;
			
        border: solid 3px red;
        border-spacing:0;
        border-collapse: collapse;
      }
      td
      {
        padding: 0;
        text-align: center;
        box-shadow: inset 0 0 0 1000px white;
      }
    </style>
  </head>
  <body>
    <table><tr><td>Hello world!</td></tr></table>    
  </body>
</html>

当我尝试使用Firefox（49.0.2），并小心地将所有边距设置为0 并将渲染大小设置为100％时，我得到一张显然超大的表：

如果我选择'适应页面'来渲染大小，我会得到一张显然缩小尺寸的表格：

如果我尝试使用Chrome（54.0.2840.87米）

我试图在css中一直强制尺寸为210mmx297mm，但仍然有问题。我无法弄清楚它是什么......要么是渲染引擎中的错误，要么是在我的代码中设置缺失。

注意

在上下文中，我正在尝试使用html + css + javascript创建自动报告，以便可以轻松查看这些报告，并最终通过网络浏览器将其打印为pdf或纸张。封面应在A4纸的边缘填充一些图像。

以下是一些更完整的例子：

Example (JSFiddle)

我几乎就在那里，所有内容都在屏幕上显示得很好（firefox + chrome）但是在打印时仍然有这些边距（打印使用firefox + nomargin +仅适应 ... Chrome已被删除打印时重复表格页眉/页脚。

Answer 1

你正在解决一个困难的问题，这是许多程序员存在的祸根。从HTML打印并确保与不同浏览器的兼容性基本上是独角兽。你不应该自己管理这个问题。 CSS样式的怪癖和浏览器生态系统的碎片将确保您不会成功。

我的建议是，您可以查看PDF生成器API，例如PDF Kit或iText。

从我的研究来看，页面和表单打印在Firefox上尤其成问题。正如您从第一手经验中注意到的那样，您无法以理智的方式管理利润。我也尝试使用Firefox 49.0.2但没有成功。

我考虑使用@media print{}，但Firefox不愿意合作。

话虽这么说，你的代码在我提到的版本上运行Chrome时效果很好。请注意，我将边距设置为“无”。

Answer 2

封面应在A4纸的边缘填充一些图像。

你永远不会满足这个要求。相信我，我已经在网上做了很长一段时间的仪表板和报告，而你根本就没有对这样的渲染进行细粒度的控制。网络不是为它而设计的。

如果您愿意在保证金范围内工作而不尝试像素完美的布局，您仍然可以生成一些出色的报告。 Web报告看起来非常清晰，您可以使用一个代码库覆盖多个媒体。

但是对于像素完美渲染很重要的情况，除了控制分页符等之外，只有PDF库就足够了。那里有一些好的 - 我在PDFSharp取得了成功。

为什么不显示不覆盖整个页面的封面图片？

Answer 3

你可以使用phantomjs渲染你的pdf（你最终要求pdf）。在php中，我已成功使用https://github.com/kriansa/h2p生成pdf＆＃39; s。（还有使用d3.js渲染基于javascript的图表）。这并不容易，但通过无头浏览，你可以使它工作。

打印html元素时如何获得正确的渲染大小

3 个答案: