Print out content of a div with image

Question

I want to print the content of a div and add some image on the print out page. I have found the solution on Stackoverflow (Print the contents of a DIV)

But although i add an image to the page, the image does not appear on print page.

function PrintElem(elem){var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title  + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title  + '</h1>');
mywindow.document.write('<p><center>' + document.getElementById(elem).innerHTML + '</center></p>');
mywindow.document.write('<img src="https://www.google.com.tr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();

The sample google image does not appear on printpreview page.

Change your images to base 64 – Emilius Mfuruki Jul 03 '19 at 07:34 — Emilius Mfuruki, Jul 03 '19 at 07:34

score -1 · Answer 1 · answered Apr 25 '18 at 06:51

<!DOCTYPE html>
<html>
<head>
<script>
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title  + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<h1>' + document.title  + '</h1>');
mywindow.document.write('<p><center>' + document.getElementById(elem).innerHTML + '</center></p>');
mywindow.document.write('<img src="https://www.google.com.tr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
}
</script>
</head>
<body>
<h2>My First JavaScript</h2>
<button type="button" onclick="PrintElem('aa');">
Click me to display Date and Time.</button>
<div id="aa"> my sample</div>
<p id="demo"></p>
</body>
</html>

Refer to above code. It works fine

I think the problem is on chrome. I ve tried your code on chrome, when i first press the button the image does not appear. The image appears on the second click. — Rose_The_Only, Apr 25 '18 at 07:03

Print out content of a div with image

1 Answers1