Question

我想在加载所有图像（并且文档准备就绪）后，在打印模式下打开一个新窗口。这是我的代码：

var win = window.open();
//css ltr
win.document.write('<style>body { direction: rtl; unicode-bidi: bidi-override; }</style>');
//insert img
win.document.write('<img src="assets/imgs/logo.png">' + '<br>');
//insert txt
win.document.write(pdf);
win.document.write('<br>');
win.document.write('<img src="assets/imgs/buttomLogo.png">' + '<br>');
win.print();
win.close();

我曾尝试使用onLoad()，但它会在没有图片的情况下打印文档：

win.onload = function () {
   win.print();
   win.close();                           
}

如何在所有图像的打印模式下打开文档？小提琴 - printer。

感谢。

Answer 1

方式1：尝试使用以下代码。在HTML开始之前添加了正文标记，并在其上添加了onload函数，并在正文window.print()函数中定义了onload函数。

var win = window.open();
//css ltr
win.document.write('<style>body { direction: rtl; unicode-bidi: bidi-override; }</style>');
//insert img
win.document.write('<body onload="javascript:PrintMe()"><img src="assets/imgs/logo.png">' + '<br>');
//insert txt
win.document.write(pdf);
win.document.write('<br>');
win.document.write('<img src="assets/imgs/buttomLogo.png">' + '<br><body>');

function PrintMe()
{   
    win.print();
    win.close();
}

方式2：使用图片事件列表器image.attachEvent("onload"

var win = window.open();
//css ltr
win.document.write('<style>body { direction: rtl; unicode-bidi: bidi-override; }</style>');
//insert img
win.document.write('<body onload="javascript:PrintMe()"><img src="assets/imgs/logo.png">' + '<br>');
//insert txt
win.document.write(pdf);
win.document.write('<br>');
win.document.write('<img src="assets/imgs/buttomLogo.png">' + '<br><body>');
image.attachEvent("onload", function() {
    win.print();
    win.close();
});

Answer 2

非常hacky - 但是我这样做等待加载图像是在script标记中写入新窗口，并为图像添加一个监听器：

mywindow.document.write('<script type="text/javascript">var img = document.getElementById("js-company-logo"); var src = img.src; img.addEventListener("load", function() { window.print(); window.close(); }); img.src = ""; img.src = src;</script>');

我还必须每次都设置src图片（Chrome缓存图片时出现问题，第一次使用后没有在打印预览中显示）

Answer 3

onLoad不是最好的解决方案。关于onLoad的一个很好的信息： Javascript callback for knowing when an image is loaded

JavaScript - 在文档准备好后以打印模式打开新窗口

3 个答案: