14

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?

0

10 Answers 10

33

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

1
  • 4
    Or add a meaningful class-name 'no-print', and have that no-print {display: none;}, and apply that to all items that are irrelevant or unwanted in the printed version. Commented Jul 7, 2009 at 10:43
7

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.

6

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.

3
  • Isn't there any way to build a print preview exactly same as the one offered by a browser?
    – rahul
    Commented Jul 7, 2009 at 6:43
  • 12
    No! No! No! No! No! No! No! No! No! No! No! (Stackoverflow has a minimum comment length)
    – Quentin
    Commented Jul 7, 2009 at 6:58
  • 4
    Let the browser handle the print preview. Include a print stylesheet that makes your invoice page look nice when printed (this is a good thing to do for any webpage), and if you want, include a "Print this Page" link, but let the browser handle browser-based tasks. Commented Jul 7, 2009 at 7:22
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.

3
  • this is for print. but i need to preview before printing
    – rajanikant
    Commented Jul 7, 2009 at 6:36
  • one thing more that when i take print with this script then print this page is also printed. how can i hide this?
    – rajanikant
    Commented Jul 7, 2009 at 6:44
  • 1
    Actually, a pseudo-preview is the closest you can get inside the browser. Pseudo-preview means in this case, that all 'screen' targeted stylesheets are removed, and all 'print' targeted stylesheets are applied. No paging, sorry.
    – Boldewyn
    Commented Jul 7, 2009 at 7:06
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?

0

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.

1
  • 1
    Huh? No you don't. You just use overriding print styles, either with an @media query in the CSS or media="print" in the HTML for the page. Then tag the Print this page link with a no-print class and style the .no-print with display:none;, and apply any other print-specific styles you want. Commented Feb 25, 2014 at 20:29
0

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.

0

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.

2
  • Failure to indicate you are linking to your own webpage. Commented Oct 28, 2012 at 3:52
  • Failure of link to own webpage.
    – Tedinoz
    Commented Nov 8, 2021 at 22:03
0

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';
    })
}
-1
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.