google chrome print preview does not load the page the first time

Question

I'm trying to print a page using this code

<html>
<head>
    <script type="text/javascript">
        function Popup() 
        {

            var mywindow = window.open('', 'Ticket info', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            mywindow.document.write('<style type="text/css"> *{margin: 0; padding: 0;} body{padding: 3px; padding-left:20px;font:6px bold Arial;}</style>');
            mywindow.document.write('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>');
            mywindow.document.write('<script src="jquery-barcode.min.js"><'+'/script>');
            mywindow.document.write('</head><body>');
            mywindow.document.write('<div id="demo"></div>');
            mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');
            mywindow.document.write('</body></html>');
            mywindow.print();
            return true;
        }
    </script>
</head>
<body>
<input type="button" value="Print Div" onclick="Popup();" />
</body>
</html>

Basically it will pop out a window and show a print preview of the page. the first attempt to load the print preview will not load the barcode and when you cancel the first print preview then right click the page and print again the 2nd print preview will now show the barcode to print.

1st print attempt

reprint

2nd print attempt

I think the issue is coming from this line:

mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');

when I comment this line and add a dummy text to the page. It will automatically show up in the print preview on the first attempt.

I had the same issue before when I'm trying to load the style from a css file. I resolve this by transferring the styles directly to the popup window.

My question is why is this happening? and how can I load the barcode on the first attempt of the print preview?

score 22 · Accepted Answer · answered Oct 30 '15 at 05:47

You need to put delay before print. There is a native defect in chrome.

Code would as under :-

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}

Thanks @HaiderAliWajihi for your appreciation. You can like my answer so that other can also find this solution — Anand Deep Singh, May 15 '17 at 07:29

score 4 · Answer 2 · answered Dec 02 '16 at 22:05

This worked for me (as well as implementing Anand's observed IE 10+ requirements):

function Popup() {
    var _window = window.open('');
    _window.document.write(data);

    // required for IE >= 10
    _window.document.close();
    _window.focus();

    _window.document.body.onload = function() {
        // continue to print
        _window.print();
        _window.close();
    };

    return true;
}

Instead of waiting for the window to load and attempting to print it prematurely, this just waits for the entire document.body to load.

This worked better for me than the prefered answer (tested on Chrome), which only works the first time but not the subsequent ones. — Okay, Jan 16 '18 at 12:57

score 1 · Answer 3 · answered Feb 08 '15 at 06:15

I moved the window.print() command on the pop up window it self so it can load the jquery function first before printing.

This is the line that I added.

mywindow.document.write('<script type="text/javascript">window.print();<'+'/script>');

This is the whole code:

<html>
<head>
    <script type="text/javascript">
        function Popup() 
        {
            var mywindow = window.open('', 'Ticket info', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            mywindow.document.write('<style type="text/css"> *{margin: 0; padding: 0;} body{padding: 3px; padding-left:20px;font:6px bold Arial;}</style>');
            mywindow.document.write('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>');
            mywindow.document.write('<script src="jquery-barcode.min.js"><'+'/script>');
            mywindow.document.write('</head><body>');
            mywindow.document.write('<div id="demo"></div>');
            mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');
            mywindow.document.write('<script type="text/javascript">window.print();<'+'/script>');
            mywindow.document.write('</body></html>');
            return true;
        }
    </script>
</head>
<body>
<input type="button" value="Print Div" onclick="Popup();" />
</body>
</html>

score 0 · Answer 4 · answered Jan 07 '16 at 07:31

actually you can create an extension css and place all your css in there...

Default

 mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css"/>');

Then just replace it like this

mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css" media="print"/>');

just add media='print' to recognize it..

Hope it will help...

google chrome print preview does not load the page the first time

4 Answers4

Linked