Javascript: Empty html div contents after Window.print()
Question
On button click, I'm using window.print() of javascript for printing print_div contents,
But because of some security issue, i wanted to avoid the multiple printing (like using Cntrl + P) options, So i was thinking of to clear print_div contents, that users can't re-print again and again.
Rough Code here,
document.getElementById("print_div").innerHTML = //Some contents to be printed on paper.
window.print()
document.getElementById("print_div").innerHTML = '' // Clearing old contents to avoid mis-use
But this code not working at all, its clearing print_div contents before creating print preview like in chrome.(i guessed, working Asynchronously)
Could any one tell me, where am doing wrong here?
Note : Am using Chrome: 22.0.1229.92 m to test my code & i want to go for chrome only.
6 answers
solution1
2 2012-10-10 07:11:50
You can use setTimeout method and try it.
setTimeout("your code or function etc",mili seconds)
setTimeout("document.getElementById('print_div').innerHTML = ''",5000);
solution2
2 2015-01-30 20:22:10
It's because print window wasn't loaded.
var showPrintWindow = function (context) {
var printWindow = window.open('', '');
var doc = printWindow.document;
doc.write("<html><head>");
doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />");
doc.write("</head><body>");
doc.write(context);
doc.write("</body></html>");
doc.close();
function show() {
if (doc.readyState === "complete") {
printWindow.focus();
printWindow.print();
printWindow.close();
} else {
setTimeout(show, 100);
}
};
show();
};
solution3
1 ACCPTED 2012-10-10 07:22:15
You are printing in the print_div and in next step you are clearing the same. Therefore it shows empty. You can store printing data in a variable. Then display it in the print_div and you can clear the variable.
var print = "";
print += "<p>Something </p><br/>";
print += "<table><tr><td>Something</td><td>Something</td></tr>
<tr><td>Something</td><td>Something</td></tr> </table>";
document.getElementById("print_div").innerHTML = print;
print = "";
something like this. Set this javascript to button onsubmit event.
solution4
1 2016-10-06 21:07:47
Had a similar problem to yours in Chrome, it was showing blank page in Print Preview. Tried using setTimeout but it didn't work. What worked was window.onload.
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
solution5
0 2012-10-10 07:22:29
I would not go for the setTimeout, it will only work if the user immediately comfirms the print, which you cannot assume blindly..
I would do something like the following:
var html = "<html><head></head><body>" + $("print_div").html() + "</body></html>";
var newWindow= window.open("", "PrintWindow",
"width=100,height=50,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
newWindow.document.writeln(html);
newWindow.document.close();
newWindow.focus();
newWindow.print();
newWindow.close();
and then perform your wipe
$('print_div').clear();
solution6
0 2016-03-22 09:01:54
setTimeout(function(){printWindow.document.close();
printWindow.print();}, 500);
it will work
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.