CreativeMind CreativeMind - 5 years ago 1175
Javascript Question

element print preview is blank and prints blank pages in Google Chrome

I am using this jQuery code from Print the contents of a DIV to print the contents of an overlay div:

function PrintElem(elem){
Popup($(elem).html());
}

function Popup(data)
{
var mywindow = window.open('', 'title', 'height=666,width=1000');
mywindow.document.write('<html><head><title>title-title</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('<link rel="stylesheet" href="includes/css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
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;
}


It was working perfectly fine until a recent Google Chrome update, which causes it to show blank print preview and print blank pages.

I did some research about this and found out that the best solution would probably be to add some $(window).load(function() to make the print() fire only after the popup has been fully loaded, but I am not sure how to integrate it or modify this correctly.

Any suggestions?

EDIT:

As suggested by someone on the original stackoverflow question, I tried modifying the function to add

mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');


But this broke the function entirely, I guess because of the
</script>
tag in that line.

This is how my broken modified function looks like:

function Popup(data)
{
var mywindow = window.open('', '316steel.com Shopping Cart', 'height=666,width=1000');
mywindow.document.write('<html><head><title>316steel Jewelry Corporation - Shopping Cart</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('<link rel="stylesheet" href="includes/css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);

mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');


mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10

// mywindow.print();
// mywindow.close();

return true;
}

Answer Source

Since the <script></script> tags are breaking the code, try using this line :

mywindow.document.write('<scr'+'ipt type="text/javascript">$(window).load(function() { window.print(); window.close(); });</scr'+'ipt>')

And without jQuery :

mywindow.document.write('<scr'+'ipt type="text/javascript">function PrintPage() { window.print(); window.close(); } window.onload = PrintPage;</scr'+'ipt>');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download