JavaScript print preview

Question

How can I see print preview of my invoice generated from website. If I print with the script

print this page

        

Answer 1

Surprisingly enough, no one has yet addressed the

How can I see print preview of my invoice generated from website

question. I've just needed a similar functionality and came up with the solution in How to see the print media CSS in Firebug?

Answer 2

To directly answer your question, when you call the Browser print() method it prints the page as-is. If you want to print a different version of the page (without the "Print this page" element, for example), you will need to create a separate Printable version of the page (usually done using a separate stylesheet) which does not have those elements you do not want on the Printed page.

Answer 3

function printReport( )
{     
    document.getElementById('ImagePrint').style.visibility='hidden';     
    window.print();
    document.getElementById('ImagePrint').style.visibility='visible';        
}

in html body

<div>
    <a id="ImagePrint" onclick="return printReport();" style="vertical-align: top">print Info</a>
</div>

This function will not show ur image in printing. u can use your control rather than image with control id. hope u will get ur solution

Answer 4

Browsers don't offer an API to trigger the print preview feature in browsers.

Happily, they almost all keep it in the usual place (dangling from the File menu), so you shouldn't have to draw users' attention to it.

Answer 5

This is what I used:

printPage(evt: any) {
    // add this 'noprint' class to elements you want to hide from printing
    let hideElements = document.getElementsByClassName('noprint');  
    let arr = Array.prototype.slice.call(hideElements)
    arr.map(val => {
      val.style.visibility = 'hidden';
    })
    let w = window.open();
    // 'main' is the section I want to print
    w.document.write(document.getElementById('main').innerHTML);  
    w.print();
    w.close();
    arr.map(val => {
      val.style.visibility = 'visible';
    })
}

Answer 6

To hide the link when printing, do this:

<style type="text/css" media="print">
.printlink
{
    display:none;
}
</style>
<a href="javascript:windows.print()" class="printlink">print this page</a>

Alternatively:

<a href="javascript:windows.print()"
onclick="this.style.display='none';"
class="printlink">
print this page
</a>

Although this won't reappear after cancelling the print.