如何在打印html元素时获得正确的渲染大小 [英] How to get correct rendering size when printing html elements
问题描述
为了说明我的目的，我将我的代码简化为一个html页面上有一个应该是210mmx297mm（A4纸尺寸）的红色镶边桌子：
<！DOCTYPE html>< html> < HEAD> <风格> @page {尺寸：210毫米297毫米肖像; / *设置纸张尺寸为A4（人像）* /} html，body {width：210mm;填充：0;保证金：0汽车; / *左，右是自动的身体出现在屏幕上居中* /} html {background：rgb（204,204,204）; / *屏幕上的灰色客户端窗口（以强调A4纸的身体）* /}表格{宽度：100％;高度：297毫米; -moz-box-sizing：border-box;边框：实心3px红色;边界间隔：0;边界崩溃：崩溃; } td {padding：0; text-align：center; box-shadow：inset 0 0 0 1000px white; }< / style> < /头> <身体GT; < table>< tr>< td> Hello world！< / td>< / tr>< / table> < / body>< / html>
$ b b
- 如果我使用Chrome（54.0.2840.87米） b $ b
我试图在css中一直强制大小为210mmx297mm，但还是有些问题。我无法弄清楚它是什么...无论是渲染引擎中的错误还是在我的代码中设置丢失。
$ b
注意 p>
在上下文中，我试图在html + css + javascript中创建自动报告，这样可以很容易地查看并最终从网络浏览器打印成pdf或者文件。封面应该填满A4纸的边缘。
以下是一些比较完整的例子：
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!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>
- When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
- If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
- I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using @media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
这篇关于如何在打印html元素时获得正确的渲染大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
