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:windows.print()">print this page</a>

in the print "print this page also printed .

How can I hide it?

Answer 1

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 2

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 3

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 4

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 5

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

Answer 7

Thanks! Found this very helpfull.

Answer 8

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

in html body -- print Info enter code here

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