1

I have an html page that I want to be printable from a browser.

Unfortunately, I seem to be unable to accomplish this goal. Here is how the print preview looks like in Chrome:

enter image description here

I need a page break in the middle of the table, but nothing I do helps!

I tried to convert it to pdf, to no avail - How to convert a simple html to pdf using wkhtmltopdf?

halfer
  • 19,824
  • 17
  • 99
  • 186
mark
  • 59,016
  • 79
  • 296
  • 580
  • The best way is to have a print friendly stylesheet that is scaled to A4 size. print.css is common place on modern websites. – Kevin Lynch Apr 07 '13 at 17:20

2 Answers2

2

If You want to print particular part of your web page you can use following code. it also help to preview your print page in new window.

<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>
Butani Vijay
  • 4,181
  • 2
  • 29
  • 61
1

Take out the height:100%; on your body and html.

Easy :)

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • Why does it affect the print result this way? – mark Apr 07 '13 at 20:14
  • Well, you fixed the height at 100% of the browser height, so when printing you specified that the height of the document is 100% the height of a sheet of paper - in other words, 1 page. It's unusual to have that value in there (I can't think of any time I've set a height on html or body), so it jumped out at me straight away. – Rich Bradshaw Apr 08 '13 at 06:59