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?
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
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
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.
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.
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.
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?
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.
@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
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.
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.
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';
})
}
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