How to show JS-generated img on print

Question

I have a following code:

jQuery('#print').on("click", function(){
    var mywindow = window.open('', 'my div', 'height=400,width=600');

    mywindow.document.write('<html><head><title>Title</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<img src="https://www.google.pl/images/srpr/logo11w.png" alt="logo"/>');
    mywindow.document.write('</body></html>');

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

    return true;
});

What it does, is when somebody click on #print button, small window containing google logo appears with already opened printing popup. Unfortunatelly, when I print this on paper or to PDF, the image doesn't appear - showing it's alt attribute instead.

How can I fix that?

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

I just tried your code in a working JSBin here http://jsbin.com/catubuwa/1/edit?html,js,output on Windows 8.1 using Chrome and it seems to work just fine as you expect when printing to a .pdf file. However, I seem to notice that there might be a race condition and load timing issue. Maybe in your case the page is loading and being prepped for print before the page or image has loaded fully?

If that is what's happening I've added a basic .ready() for your myWindow to then print:. But if you notice I've taken out the close. This also seems to help as well. The reason being is that the print function is actually being called on this window and therefor is the print dialog. This will vary based on browser but the close also seemed to have an impact on the printing as well.

jQuery('#print').on("click", function(){
    var mywindow = window.open('', 'my div', 'height=400,width=600');

    mywindow.document.write('<html><head><title>Title</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<img id="myImage" src="https://www.google.pl/images/srpr/logo11w.png" alt="logo"/>');
    mywindow.document.write('</body></html>');


   $(mywindow).ready(function() {  
  // Call Later In Stack - really should be onload events or base64 images inline
  setTimeout(
    function(){
        mywindow.print(); 
    },(1000));
});

});

Maybe staging the process might help ensure that everything is ready to be printed when the new window is opened and constructed.

Working Copy:

http://jsbin.com/catubuwa/1/edit?html,js,output

References:

edited May 23 '17 at 10:25

Community

1
1

answered Jul 24 '14 at 12:24

Frankie Loscavio

344
4
15

Is it working for you on http://jsbin.com/zosejate/1/edit?html,js,output ? I've tried this jsbin on FF, Chrome, Opera and IE and it doesn't print the image on any of them. Tested on 3 different PCs – zorza Jul 24 '14 at 12:49
It looks like if it's the first time used and the image is not loaded, then it doesn't work. Then once the image is loaded or cached in the browser it seems to work every time because it's a 304 fast image load. I'm working on trying to detect when the image is also loaded. This will hopefully help guarantee that all assets are present and loaded before printing begins. – Frankie Loscavio Jul 24 '14 at 23:37
Can you try this jsbin example - http://jsbin.com/catubuwa/1/edit?html,js,output all i did was add a timeout to give the window a subsequent call later equivalent. it's not a very graceful solution and i really don't recommend it, BUT it might help you really see in stages what is happening. Make sure you clear your history and load the window from scratch allowing the image to load. It seems making sure the img's are loaded is crucial to getting the desired print out you are looking for. – Frankie Loscavio Jul 25 '14 at 00:15
If it appears to work every time with the hacky timeout() then i can help you re-factor to stage loading of all your images on the new window and when they are all complete then trigger the print function – Frankie Loscavio Jul 25 '14 at 00:20
Check out the last comment. Apparently timing and loading is an issue and causes the issues you are experiencing - http://stackoverflow.com/a/21437906/1380685 – Frankie Loscavio Jul 25 '14 at 00:23
also it seems the order you decide to call mywindow.close(); varies in different browsers so i took it out for now, but in ie and firefox it blocks the print window. – Frankie Loscavio Jul 25 '14 at 00:31
https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it – Frankie Loscavio Jul 25 '14 at 00:40
http://stackoverflow.com/questions/17534415/print-popup-in-javascript-missing-images – Frankie Loscavio Jul 25 '14 at 00:41
you could also preload the images and or assets in advance of this print operation. that is if you control everything about this window being popped then you can preload asynchonous assets that are loaded so when the user goes to print it's fast and ready to go – Frankie Loscavio Jul 25 '14 at 01:35

How to show JS-generated img on print

1 Answers1