Question

我正在开发一个MVC C＃app，其中div的内容由一个AJAX调用组成，该调用检索数据库字段并作为成功消息返回给JavaScript。字符串（一个简单的例子）：

"<div style='background:yellow'>asdf<img src='myfile.jpg'></div>"

然后打印

：

function printDivContents(contents) {
    var printContents = contents;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = "<div style='margin:10px'>" + printContents + "</div>";
    window.print();
    document.body.innerHTML = originalContents;
}

在大多数情况下，所有内容都打印得很完美，但是当有图像时，只有先前已经加载过才能打印出来。我希望它始终打印。我尝试在内容字符串中添加预加载脚本。我只能使用纯JavaScript而不是jQuery，并且所有CSS都必须是内联的。我有什么选择来加载图像？我应该暂停执行以等待DOM加载，将图像指定为调用页面上隐藏的div背景，还是......？

Answer 1

在进行初始AJAX调用的页面上，创建一个隐藏的div：

<div style="display:none; background:url('myfile.jpg')"></div>

如果文件是动态更改的，请在打印前更改div的背景。

Answer 2

如果你想仍然能够动态更改图像，我遇到了非常类似的问题，并发现等待图像加载的效果非常好：

var image = Image();
image.onload(function () {
    //print the screen, or do whatever
});
image.src = "whateverImgSrc";

使用图像打印Div

2 个答案: