CODEWITHSUNDEEP
jquerygoogle-chrome
Nikita 웃
Nikita 웃

Reputation: 2060

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('', '.com Shopping Cart', 'height=666,width=1000');
        mywindow.document.write('<html><head><title>- 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;
    }

Upvotes: 0

Views: 4826

Answers (4)

Robert
Robert

Reputation: 397

I like Sri's answer, but that didn't work for me. I used this slightly modified code and it works for IE, FireFox, Chrome and Safari. It seems Chrome and Safari need the delay to work properly. Hope this helps someone.

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('</body></html>');
    mywindow.document.close();
    mywindow.focus();

   /* Delaying the print event */ 
   setInterval(function () { 
      mywindow.print();
      mywindow.close();    
    }, 100);

    return true;
}

Upvotes: 0

Kanishka Hewapathirana
Kanishka Hewapathirana

Reputation: 21

By using setTimeOut function, you should be able to resolve your issue.

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('</body></html>');
    mywindow.document.close();
    mywindow.focus();

   /* Delaying the print event */ 
    setTimeout(function () {           
            mywindow.print();
            mywindow.close();
        }, 2000);

    return true;
}

Upvotes: 0

Sri
Sri

Reputation: 11

Instead of adding Javascript or Jquery to the content of the new window, you can delay the print() event and let the window load first.

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('</body></html>');

   /* Delaying the print event */ 
   setInterval(function () { 
      mywindow.document.close();
      mywindow.focus();
      mywindow.print();
      mywindow.close();    
    }, 100);

    return true;
}

Upvotes: 0

Petar Nikov
Petar Nikov

Reputation: 1447

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>');

Upvotes: 2

Related Questions