Question

我需要使用JavaScript打印图像。我无法找到一个jQuery解决方案，所以我尝试了以下内容：

var printWindow = window.open('', 'Print Image', 'height=400,width=400');
printWindow.document.write('<html><head><title>Print Image</title></head><body></body></html>');

var img = printWindow.document.createElement('image');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
    printWindow.print();
    printWindow.close();
};
printWindow.document.body.appendChild(img);
printWindow.document.close();

不幸的是，弹出式HTML是这样的：

<html><head><title>Print Image</title></head><body><image></body></html>

因此，似乎没有为图片设置src属性。

我之前已将图片标记放在document.write()函数中，但我发现某些图片的打印窗口为空白。我的理论是打印窗口在一些图像完成下载之前打开，因此显示（和打印）空白。这就是我尝试这种方法的原因。

为什么这不起作用，如何解决？

Answer 1

printWindow.document.createElement('img');

使用正确的标签名称

查看http://jsbin.com/nurohutatasi/1/

Answer 2

你试过吗

var img = new Image();

而不是

var img = printWindow.document.createElement('image');

<image>不是正确的图片代码（<img>就是它）

Answer 3

您在加载图像之前附加图像。此外，在图像加载和打印之前关闭printWindow（最后两行）。 img是正确的标记名称：

var img = printWindow.document.createElement('img');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
    printWindow.document.body.appendChild(img);
    printWindow.print();
    printWindow.close();
};
//printWindow.document.body.appendChild(img);
//printWindow.document.close();

图像src没有写入弹出窗口体？

3 个答案: