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

Question

镀铬24

我现在正在重新编写一个功能有些奇怪的网站。 在一个页面上，向用户提供了一个选项列表，以选择要打印的图像。

用户选中所需图像的复选框，然后单击一个按钮以回调服务器，并针对给定图像将所需的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的打印预览窗口实际上是在waitForImages调用完成之前渲染的，因此内容未显示，但是我没有想出具体的测试方法。

谢谢

Answer 1

也许尝试窗口加载：

$(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/

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

希望能帮助到你 ！