Dears, Why doesn't the 'image64' base64 variable of a gif image (normaly returned by a script (Ajax) to a calling Javascript function) appear in the print preview (and printed) html document (normaly prepared in the same JS function) ? Windows 11, Edge, Chrome. See my source below. Thanks for help.
<!DOCTYPE html >
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test_3.php : Picture in confirmation document issue.</title>
</head>
<script type="text/javascript">
function printConfo() {
var image64 = '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';
var doc_print = window.open("", "Confirmation");
doc_print.document.open();
doc_print.document.write('<!DOCTYPE html> <html lang="en-us> <head>');
doc_print.document.write('<meta charset="utf-8" http-equiv="content-type" content="text/html" />');
doc_print.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
doc_print.document.write('<title>Confirmation</title> </head>');
doc_print.document.write('<body style="font-family:verdana; font-size:12px;" onload="self.print(); self.close();">');
doc_print.document.write('<br /> <br /> <h4><center>CONFIRMATION</center></h4> <br />');
doc_print.document.write('<center> <img src="data:image/gif;base64,' + image64 + '" height="180" width="180" alt="BelgianFlag" > </center>');
doc_print.document.write('<h1></h1> Blablabla ...');
doc_print.document.write('</body> </html>');
doc_print.print();
doc_print.close();
}
</script>
<body>
<h2>Picture in print preview document</h2>
<input id="submit" type="button" value=" Print confirmation " onclick="printConfo()"/>
</body>
</html>
I'm just trying to build (in a JS function) and propose a confirmation html document to my clients.
The problem is, that the base64 image can be huge in size, so it needs time to load, I simplified the code and added a short delay before triggering the print action. This delay allows time for the image to be loaded properly before printing. Adjust the delay value (in milliseconds) as needed based on your image loading time. This approach ensures that the image is included in the print preview.
I hope that help.