用图像打印出一个div的内容[重复]答案

【问题标题】：Print out content of a div with image [duplicate]用图像打印出一个div的内容[重复]
【发布时间】：2018-04-25 06:32:11
【问题描述】：

我想打印一个 div 的内容并在打印页面上添加一些图像。我在 Stackoverflow (Print the contents of a DIV) 上找到了解决方案

但是虽然我在页面中添加了图像，但图像并没有出现在打印页面上。

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

示例谷歌图片没有出现在打印预览页面上。

【问题讨论】：

将图像更改为 base 64

标签： javascript jquery html printing

【解决方案1】：

<!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>

参考上面的代码。效果很好

【讨论】：

我认为问题出在 chrome 上。我在 chrome 上试过你的代码，当我第一次按下按钮时，图像没有出现。图像出现在第二次点击。