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

Question

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

在将它们打印到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>

Run Code Online (Sandbox Code Playgroud)

当我尝试使用Firefox(49.0.2)打印它,并小心地将所有边距设置为0并将渲染大小设置为100%时,我得到一个显然超大的表:

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

如果我尝试使用Chrome(54.0.2840.87米),我会更幸运

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

注意

在上下文中,我正在尝试使用html + css + javascript创建自动报告,以便可以轻松查看这些报告,并最终从Web浏览器打印到pdf或纸张.封面应在A4纸的边缘填充一些图像.

这是一些更完整的例子:

示例(JSFiddle)

我几乎就在那里,一切都在屏幕上很好地显示(firefox + chrome)但是在打印时仍然有这些边距(打印工作只使用firefox + nomargin + adaptsize ...在打印时重复打印页眉/页脚时会出现问题).

Answer 1

Ped*_*edo 7

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

我的建议是,您可以查看PDF生成器API,如PDF Kit或iText.

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

我想过使用@media print{}但是Firefox不愿意合作.

话虽这么说,你的代码工作得很好,我在你提到的版本上运行Chrome.请注意,我将边距设置为"无".

归档时间：	9 年，3 月前
查看次数：	642 次
最近记录：	9 年，3 月前