我正在使用 JavaScript 打印我的网页的一部分，其中包含 Logo 和一些添加到其中的文本。 我的问题是显示了图像的位置，但图像本身不存在!
<script>
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var logostr = "<div style=\"width: 100%; text-align: center; height: 50px;\"><div class=\"pull-right\"><img src=\"../Images/lionLogo.jpg\" width=\"50\" height=\"50\" /></div><div>some text</div></div>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + logostr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
$('#modalShowDetails').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$('.fade').remove();
return false;
}
</script>
最佳答案
您需要动态创建图像元素以将图像加载到 DOM 中
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var logostr = "<div style=\"width: 100%; text-align: center; height: 50px;\"><div class=\"pull-right\"></div><div>some text</div></div>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + logostr + newstr + footstr;
var img = new Image();
img.onload = function() {
$('.pull-right').append(img);
};
//use full image source path like
//img.src = 'https://lh4.googleusercontent.com/-QEBhGh-wj2A/AAAAAAAAAAI/AAAAAAAAGNY/nogbhLrR0mc/photo.jpg';
img.src = '../Images/lionLogo.jpg';
img.width = "50";
img.height = "50";
//adding delay to load image
setTimeout(function() {
window.print();
document.body.innerHTML = oldstr;
}, 2000);
$('#modalShowDetails').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$('.fade').remove();
return false;
关于javascript - 图像未显示在带有 javascript 的手工页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46203230/