Javascript 如何在打印时显示JS生成的img_Javascript_Html_Printing

Javascript 如何在打印时显示JS生成的img

javascript html printing

Javascript 如何在打印时显示JS生成的img,javascript,html,printing,Javascript,Html,Printing,我有以下代码： jQuery('#print').on("click", function(){ var mywindow = window.open('', 'my div', 'height=400,width=600'); mywindow.document.write('<html><head><title>Title</title>'); mywindow.document.write('</head>

我有以下代码：

jQuery('#print').on("click", function(){
    var mywindow = window.open('', 'my div', 'height=400,width=600');

    mywindow.document.write('<html><head><title>Title</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<img src="https://www.google.pl/images/srpr/logo11w.png" alt="logo"/>');
    mywindow.document.write('</body></html>');

    mywindow.print();
    mywindow.close();

    return true;
});

jQuery（'#print'）。在（“单击”，函数（）{
var mywindow=window.open（“”，'my div'，'height=400，width=600'）；
mywindow.document.write（'Title'）；
mywindow.document.write（“”）；
mywindow.document.write（“”）；
mywindow.document.write（“”）；
mywindow.print（）；
mywindow.close（）；
返回true；
});

它的作用是，当有人点击#打印按钮时，包含谷歌徽标的小窗口就会出现，并且已经打开了打印弹出窗口。不幸的是，当我把它打印在纸上或PDF上时，图像并没有出现——而是显示它的alt属性

如何修复此问题？

我刚刚在Windows 8.1上使用Chrome进行的一次工作中尝试了您的代码，它似乎与您在打印到.pdf文件时预期的一样工作正常。然而，我似乎注意到可能存在竞争条件和加载时间问题。也许在您的情况下，页面正在加载并在页面或图像完全加载之前准备打印

如果是这样的话，我已经为myWindow添加了一个基本的.ready（），然后打印：。但是如果你注意到我已经结束了。这似乎也有帮助。原因是打印功能实际上正在该窗口上被调用，因此是打印对话框。这将因浏览器而异，但收尾似乎也会对打印产生影响

jQuery('#print').on("click", function(){
    var mywindow = window.open('', 'my div', 'height=400,width=600');

    mywindow.document.write('<html><head><title>Title</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<img id="myImage" src="https://www.google.pl/images/srpr/logo11w.png" alt="logo"/>');
    mywindow.document.write('</body></html>');


   $(mywindow).ready(function() {  
  // Call Later In Stack - really should be onload events or base64 images inline
  setTimeout(
    function(){
        mywindow.print(); 
    },(1000));
});

});

jQuery（'#print'）。在（“单击”，函数（）{
var mywindow=window.open（“”，'my div'，'height=400，width=600'）；
mywindow.document.write（'Title'）；
mywindow.document.write（“”）；
mywindow.document.write（“”）；
mywindow.document.write（“”）；
$（mywindow）.ready（函数（）{
//稍后在堆栈中调用-实际上应该是onload事件或base64映像内联
设置超时(
函数（）{
mywindow.print（）；
},(1000));
});
});

可能分段过程有助于确保在打开和构建新窗口时，所有内容都可以打印

工作副本：

参考文献：

这对您是否有效？我在FF、Chrome、Opera和IE上尝试过这个jsbin，但它不会在任何一个浏览器上打印图像。在3台不同的电脑上测试，如果它是第一次使用，并且图像没有加载，那么它就不工作了。然后，一旦图像加载或缓存到浏览器中，它似乎每次都能工作，因为它是一个304快速图像加载。我正在努力检测图像何时也被加载。这将有助于保证在打印开始之前，所有资产都已存在并已加载。您可以尝试这个jsbin示例吗？我所做的只是添加一个超时，以便稍后给窗口一个后续调用。这不是一个非常优雅的解决方案，我真的不推荐它，但它可能会帮助您在各个阶段真正看到正在发生的事情。确保清除历史记录并从头开始加载窗口，以允许加载图像。似乎确保加载img对于获得所需的打印输出非常重要。如果每次使用hacky timeout（）都能正常工作，那么我可以帮助您在新窗口中重新加载所有图像，当它们全部完成后，触发打印功能查看最后一条评论。显然，计时和加载是一个问题，它会导致您遇到的问题-