Menu
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>
290
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;
}
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;
}
http://jsfiddle.net/doktormolle/q2zv4s54/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
