CODEWITHSUNDEEP
javascript
Wyeknott
Wyeknott

Reputation: 116

Embedded img doesnt always appear in JavaScript created page

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

Upvotes: 0

Views: 83

Answers (1)

Victor Carrera
Victor Carrera

Reputation: 101

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>');

Upvotes: 1

Related Questions