在Chrome中隐藏的DIV中打印图像

我正在重写一个网站，它现在有一个好奇的功能。有一个页面给用户提供了一个选项列表来选择要打印的图像。

用户检查他们想要的图像的复选框，然后他们点击一个按钮，回拨给服务器，给定的图像将需要的HTML注入到隐藏的DIV中。

为了使问题复杂化远一点的图片src属性实际上是链接到一个.NET MVC的服务器端动作从数据库中检索，我们抢了图像的图像，然后渲染图像上的一些文字在几个不同的地方。

输出HTML最终看起来像这样。

<div style="visibility: hidden;"> 
    <div id="PrintArea"> 
     <div><img width="1000" src="/Controller/GetImage/2"></div> 
     <div><img width="1000" src="/Controller/GetImage/3"></div> 
     <div><img width="1000" src="/Controller/GetImage/5"></div> 
    </div>  
</div>

这是第一步在JavaScript，Ajax调用回服务器填充此printArea中DIV。在此之后，我们做了以下内容：

//Print 
$('#PrintArea').waitForImages(function() { 
    $("#PrintArea").jqprint({ importCSS: true }); 
    //$.unblockUI(); 
});

为了适应服务器端加载图像，我们使用waitForImages jQuery插件，然后使用jqprint打印的内容。为了完成这个公式，我们有一个打印样式表（主样式表是media =“screen”，所以它应该是唯一的样式表）。

body * { 
    visibility:hidden; 
    } 

#PrintArea, #PrintArea * { visibility: visible; } 

#PrintArea { position: absolute;left: 0;top: 0; } 

img { display: block !important; }

这在Firefox和IE中运行良好。

Chrome不工作一致。会发生什么情况是，当选择三个图像时，前两个图像将被显示，但第三个图像应该在第二个页面有时被显示和打印，但其他时间不是。它似乎是零星的，很随机。

任何建议或想法或如何让Chrome始终如一地在分页符中打印图像？我们内部的思路是，Chrome的打印预览窗口实际上是在waitForImages调用完成之前呈现的，因此内容没有显示，但我还没有提出测试它的具体方法。

感谢

来源

2013-01-17 Khepri

也许尝试窗口负载：

$(window).load(function() { 
    // executes when complete page is fully loaded, including all frames, objects and images 
    $('#PrintArea').waitForImages(function() { 
     $("#PrintArea").jqprint({ importCSS: true }); 
     //$.unblockUI(); 
    }); 
});

窗口加载事件执行位后，当整个页面完全加载，包括所有的帧，对象和图像。因此，涉及图像或其他页面内容的功能应放置在窗口或内容标签本身的加载事件中。

来源： http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

关于铬的问题：http://forum.jquery.com/topic/document-ready-and-window-onload-difference

希望它能帮助！

来源

2013-01-22 22:13:19 khoekman