rcadaoas rcadaoas - 4 years ago 438
Javascript Question

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?

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download