print a document using javascript
Question
Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
5 answers
solution1
2 2015-02-18 09:53:02
Use CSS @media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
@media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer @media print
solution2
2 2015-02-18 09:53:25
You can specify different css rules for printing. Either you can use the @media print {} scope like this:
@media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
solution3
1 2015-02-18 09:52:09
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling window.print():
<script type="text/javascript"> function printpage() { //Get the print button and put it into a variable var printButton = document.getElementById("printpagebutton"); //Set the print button visibility to 'hidden' printButton.style.visibility = 'hidden'; //Print the page content window.print() //Set the print button to 'visible' again //[Delete this line if you want it to stay hidden after printing] printButton.style.visibility = 'visible'; } </script>
solution4
1 2015-02-18 09:52:10
add a wrapper to non-printable stuff ie buttons in your case. check below code :
<head> <style type="text/css"> #printable { display: none; } @media print { #non-printable { display: none; } #printable { display: block; } } </style> </head> <body> <div id="non-printable"> Your normal page contents </div> <div id="printable"> Printer version </div> </body>
Hope it helps.
solution5
1 2018-10-23 13:11:33
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.