0

I need to generate an HTML page, with an embedded logo and print it using just JavaScript, no jQuery.

This code works, some of the time. Most times, the image isn't printed, although if you close the print dialog box, the image is then in the generated document. EDIT Screen shots - common logo not displayed enter image description here Logo displayed enter image description here

I think what is happening is that the browser hasnt had time to decode the base 64 img before its sent to print. 

var player = GetPlayer();
var textEntry1=player.GetVar("Page1");
var textEntry2=player.GetVar("Q2");
var textEntry3=player.GetVar("Page2");

var contents = "<html><head></head><body style='width:650px;padding:20px;'>";

// Logo as base 64 encoded. Its about a 5Kb file. Chopped for clarity
contents+="<img src='data:image/png;base64,iVBOR ... gAAAABJRU5ErkJggg=='>";

contents+="<div style='font-size:26px;font-weight:bold;margin-top:26px;margin-bottom:20px;'>Print Your Answers to PDF or Paper</div>";
contents+="<div style='display:block;border-width:1px';><hr/></div>";
contents+="<div style='font-size:16px;font-weight:bold;'>Question 1</div>";
contents+="<p>"+textEntry1+"</p>";
contents+="<div style='font-size:16px;font-weight:bold;'>"+textEntry2+"</div>";
contents+="<p>"+textEntry3+"</p>";

contents+= "</body></html>";

var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
myWindow.document.write(contents);
myWindow.print();

I have tried 

window.setTimeout(myWindow.print(), 3000);

and 

myWindow.setTimeout(myWindow.print(), 3000);

Neither seem to work as the print dialog just appears without the wait.

Also tried myWindow.onload() but that doesn't even open the print dialog. Thanks

Wyeknott
  • 116
  • 2
  • 12
  • This might help: https://stackoverflow.com/questions/11138939/how-to-trigger-javascript-on-print-event And this also: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint – A. Meshu May 06 '20 at 22:48

1 Answers1

1

This is a bad practice if you don't need wait 3s: (the bad practice is use setTimeout not the 3s, The time have to be used only when you can not use others events, try to avoid the use)

window.setTimeout(myWindow.print(), 3000);
myWindow.setTimeout(myWindow.print(), 3000);

JS works with some signals, the DOM render is splitted of the rest of execution: here you can read more about it https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/

Small summary: Js first execute the full scripts and at the end execute the browse render. when you use setTimeout js moves these function out of the execution thread, and after the time generate a event for call it.

test some like this:

var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
myWindow.document.write(contents);

mywindow.document.write('<script type="text/javascript">
window.onload=function() { 
   mywindow.document.close(); // necessary for IE >= 10
   mywindow.focus(); // necessary for IE >= 10*/
   window.print(); 
   window.close(); 
};
</script>');
Victor Carrera
  • 101
  • 5
  • Thank you for your reply. The timeout was only there to give the page time to render before printing. 3 seconds was arbitrary. I have tried your two additional lines of code and it still, most of the time, doesn't show the logo on print. – Wyeknott May 06 '20 at 08:05
  • as written that doesnt work. However if I put in into the contents variable it does. var contents = ""; So answer accepted as you gave me the pointer to fix. Thanks – Wyeknott May 07 '20 at 09:47
  • wellcome, in these case put the – Victor Carrera May 07 '20 at 10:07