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

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 2

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 3

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 4

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.