如何更改此 HTML 以使其可以从浏览器中很好地打印？答案

【问题标题】：How to change this HTML to make it nicely printable from a browser?如何更改此 HTML 以使其可以从浏览器中很好地打印？
【发布时间】：2013-04-07 17:14:38
【问题描述】：

我有一个 html 页面，我想从浏览器中打印出来。

很遗憾，我似乎无法实现这个目标。以下是 Chrome 中打印预览的样子：

我需要在表格中间设置一个分页符，但我没有任何帮助！

我尝试将其转换为 pdf，但无济于事 - How to convert a simple html to pdf using wkhtmltopdf?

【问题讨论】：

最好的方法是使用可缩放为 A4 大小的打印友好样式表。 print.css 在现代网站上很常见。

标签： html printing

【解决方案1】：

如果您想打印网页的特定部分，您可以使用以下代码。它还有助于在新窗口中预览您的打印页面。

<html>
<head>
<script>
function printPage(id)
{
   var html="<html>";
   html+= document.getElementById(id).innerHTML;
   alert(html);
   html+="</html>";

   var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>

</div>

<div id="block2">
    This is Block 2 content
</div>

<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>

【讨论】：

【解决方案2】：

取出身体和html上的height:100%;。

简单:)

【讨论】：

为什么会这样影响打印结果？
好吧，您将高度固定为浏览器高度的 100%，因此在打印时您指定文档的高度是一张纸高度的 100% - 换句话说，1 页.那里有这个值是不寻常的（我想不出任何时候我在 html 或 body 上设置了一个高度），所以它马上就跳出来了。