CODEWITHSUNDEEP
javascriptjquerygoogle-chromeprinting
Romeo
Romeo

Reputation: 1831

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

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?

Upvotes: 6

Views: 20250

Answers (4)

Joseph Sutton
Joseph Sutton

Reputation: 107

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.

Upvotes: 5

Nelson Estuesta Jr
Nelson Estuesta Jr

Reputation: 275

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...

Upvotes: 0

Anand Deep Singh
Anand Deep Singh

Reputation: 2620

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;
}

Upvotes: 23

Romeo
Romeo

Reputation: 1831

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>

Upvotes: 1

Related Questions