1

I am printing a table using Javascript function as given below

<script type="text/javascript" >
function printpreview(divId) {
var content = document.getElementById(divId).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');    

mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\" 
type=\"text/css\"/>");
mywindow.document.write(content);
mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');     
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();

return true;

}

I am calling that function on click of a hyperlink using below code

 <a class="manage_link" href="" onclick="printpreview('printdiv')" >Print Preview </a>

I want the right message to appear at the end of each and every print preview page but it is only appearing at the end of last page. e.g. If there are 5 pages I want this copy right message to appear in the footer of every page.

j08691
  • 204,283
  • 31
  • 260
  • 272
sunshine789
  • 33
  • 4
  • Hey, I'm assuming your intent here is to emulate the browser's built-in print preview functionality. You can't really do that very efficiently, but you *can* create a regular print button. To do that, simply have the button call `window.print()`. Chromium browsers will render a built-in print preview by default. Firefox will open the system's print dialog. Not sure about others. – Andrew Oct 29 '19 at 19:51

1 Answers1

0

Wrap the element you want to have on every page inside a selectable element like a div with a class and in the css give that a fixed position somewhere at the bottom of your document.

For example, change

mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');

to

mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');

And include a css-rule like the following:

.footer-text { 
    position: fixed;
    bottom: 0;
}
Andre Nuechter
  • 2,141
  • 11
  • 19
  • I have already tried it, works somehow but the footer text overlap with the above text which i am printing . i am trying to print a table – sunshine789 Oct 30 '19 at 06:13
  • `position: fixed` takes the element out of the normal document-flow, so that other elements act as if it didn't exist. Try moving the overlapping content up or adding margin/padding to its container. – Andre Nuechter Oct 30 '19 at 17:43
  • can u plz suggest me a way that how can u restrict some specific rows in html table to print on a page , say e.g. i want to print 5 rows on a page , in this way the text will remain up from the footer and will not overlap. i have tried below css but its not working in chrome. ' @media print { tr:nth-of-type(5n){ page-break-after:always; } } ' – sunshine789 Oct 30 '19 at 21:51
  • Have a look at this [post](https://stackoverflow.com/questions/39125983/html-table-breaking-row-when-printing/39126325#39126325). Maybe that helps. – Andre Nuechter Oct 31 '19 at 18:46