JavaScript print preview

Question

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

<a href="javascript:window.print()">print this page</a>

in the print "print this page" also printed. How can I hide it?

Answer 1

Addressing the following part of your question:

in the print "print this page also printed .

How can I hide it?

Create a new stylesheet (in this example, I've named it "print.css") and include it in your HTML as follows:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Note the media="print"—this means the stylesheet will only be used when printing the page.

Next assign a class to your <a> element so that we can reference it in CSS:

<a href="javascript:window.print()" class="noPrint">Print this Page</a>

Finally, in your CSS file, include the following rule:

.noPrint {
    display: none;
}

Now the "Print this Page" link shouldn't appear in the printed version of your page.

Steve

Answer 2

You can create separate print stylesheets to have some general control over how a site will look in print. You can display the site to your user using this special print stylesheet before printing. That does not give you a 100% preview though, as every browser handles things a bit differently. You won't see how it prints until it actually prints. Using a print stylesheet will get you pretty close though.

Some operating systems and printer drivers offer a preview to the user between hitting the Print button and the actual print, but that's not something you have control over or that's guaranteed to always be available.

Answer 3

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 4

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 5

You can get the current page to print by calling window.print(). For example:

   <a href="JavaScript:window.print();">Print this page</a>

If you are wanting to give them some idea of what it will look like printed, you can use the script on this page to give them a pseduo-preview of the way the page with print.

Answer 6

You should hide the elements which you don't want to be displayed in print using

display:none

I wrote a tutorial about printing your webpage. I hope it helps.

Answer 7

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 8

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.

Answer 9

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 10

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