Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 994
Romeo Avatar asked Feb 05 '15 12:02

Romeo


People also ask

Why is my document not showing up in print preview?

Click on the Office button and then on Word Options and then on Display and make sure that the box for Print drawings created in Word in checked. Also go to the Advanced dialog and make sure that under Show document content, the "Show picture placeholders" box is checked.

How do I force print preview?

The print media query controls how a page looks when printed. To force a page into print preview mode: Press Ctrl + Shift + P (Windows, Linux) or Command + Shift + P (macOS) to open the Command Menu.

Why is Google Chrome not responding when I try to print?

Google Chrome crashes while you take a print from a web page might be due to an outdated browser build on your PC. While Google Chrome automatically updates to the latest version in the background, you can force the update manually.


2 Answers

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;
}
like image 153
Anand Deep Singh Avatar answered Sep 25 '22 19:09

Anand Deep Singh


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.

like image 28
Joseph Sutton Avatar answered Sep 23 '22 19:09

Joseph Sutton