Print function not working in chrome
Question
I have a print() function in my website which is used to print specific part of the website. It's working fine on Firefox and even on Internet explorer but is not working on chrome. It opens the dialog window and get the page counts too, but unable to get the content (in chrome).
my code is below:
<a href="#" onclick="PrintElem('#press_releas11')"><img src="images/print_icon.png" width="35" height="23" /></a>
<div class="blog_post" id="press_releas11">
<div class="post_title"><h3>title here</h3></div>
<div class="post_article">content here</div>
</div>
script:
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>PressReleases</title>');
mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('data');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
</script>
6 answers
solution1
6 ACCPTED 2015-04-23 15:08:27
It seems that Chrome doesn't like the document.write() . It helped to add a setTimeout of 1000ms after writing to the document and then calling mywindow.print() , but as that's not very practical and you already seem to be using jQuery, here's a working solution:
https://jsfiddle.net/2n88pxee/
Works in Chrome and Firefox, I haven't tried all other browsers, however.
Edit: and here's the code as requested in the comments
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.head.innerHTML = '<title>PressReleases</title><link rel="stylesheet" href="css/main.css" type="text/css" />';
mywindow.document.body.innerHTML = '<body>' + data + '</body>';
mywindow.document.close();
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
solution2
6 2015-04-23 15:16:22
The issue seems to be the embedded stylesheet, it has to be "downloaded", what takes some time, you try to print before the document is complete.
For me it works when I start printing when the readystate of the document is complete
function Popup(data)
{
var mywindow = window.open('', 'mydiv', 'height=400,width=600');
mywindow.document.open();
mywindow.document.onreadystatechange=function(){
if(this.readyState==='complete'){
this.onreadystatechange=function(){};
mywindow.focus();
mywindow.print();
mywindow.close();
}
}
mywindow.document.write('<html><head><title>PressReleases</title>');
mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('data');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
return true;
}
solution3
2 2015-04-23 15:16:53
After using document.write, you need to use document.close. Then use a setInterval/clearInterval to watch when the document is finished writing. Tested in Chrome on Mac:
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>PressReleases</title>');
mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('data');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
myDelay = setInterval(checkReadyState, 10);
function checkReadyState() {
if (mywindow.document.readyState == "complete") {
clearInterval(myDelay);
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
}
return true;
}
solution4
2 2017-07-31 09:17:48
As it was mentioned among answers, it has something to do with seconds, so I used setTimeout() like this:
var mywindow = window.open('', 'PRINT', 'height=5100,width=1086'); mywindow.document.write('<html><head><title>' + document.title + '</title>'); mywindow.document.write('<link rel="stylesheet" href="App_Themes/Basic/Share/Workflow.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write("SomeData"); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ setTimeout(function(){ mywindow.print(); mywindow.close();}, 2000);
solution5
0 2018-07-13 00:45:40
For those who could have a chance of the same issue I got. I decided to add this as an answer rather than a comment.
I tried all the above ways and it's still there even in IE works. Then I tried to just Ctrl+P here (on any website), the "print preview..." was still stuck there. So I realized this is not my program issue (or at least at that moment). So I switched Chrome printer to other one (like "Save to PDF"), and then switch back to "Print to PDF" , it works....
No idea why it's suddenly abnormal.
solution6
0 2022-07-30 15:03:02
function printModalResumeCalendar(data) { var showWindowCalendarModal = window.open('', '', width=957, height=957 ); showWindowCalendarModal.document.write(data); showWindowCalendarModal.document.close(); delay = setInterval(checkReadyState, 10);
function checkReadyState() {
if (showWindowCalendarModal.document.readyState == "complete") {
clearInterval(delay);
showWindowCalendarModal.focus();
showWindowCalendarModal.print();
}
}
return true;
}
This script is perfect for this question!!
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.