如何更改此HTML以使其可以在浏览器中打印出来？

我有这个HTML页面 - http://markkharitonov.bitbucket.org/invoice77853.htm，我想从浏览器打印。如何更改此HTML以使其可以在浏览器中打印出来？

不幸的是，我似乎无法完成这个目标。以下是Chrome中打印预览的样子： enter image description here

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

我试图将其转换为PDF格式，无济于事 - How to convert a simple html to pdf using wkhtmltopdf?

这个问题使我疯了。请帮忙！

来源

2013-04-07 mark

最好的方法是有一个可缩放到A4尺寸的打印友好样式表。 print.css在现代网站上很常见。 – Vector 2013-04-07 17:20:47

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

容易:)

来源

2013-04-07 17:17:08

为什么这样会影响打印效果？ – mark 2013-04-07 20:14:05

你能解释它为什么有效吗？谢谢。 – mark 2013-04-07 23:30:34

那么，您将高度固定为浏览器高度的100％，因此在打印时指定文档的高度为纸张高度的100％ - 换句话说，为1页。在那里有这样的价值是很不寻常的（我无法想象任何时候我已经在html或body上设置了一个高度），所以它马上就跳出来了。 – 2013-04-08 06:59:25

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

<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>

来源

2013-04-09 11:16:39

如何更改此HTML以使其可以在浏览器中打印出来？

回答

相关问题