2

铬 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 无法始终如一地工作。What will happen is that when three images are selected the first two will be displayed but the third which should go on a second page sometimes is displayed and printed, but other times is not. 它似乎是零星的，非常随机的。

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

谢谢

4

1 回答 1

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

希望能帮助到你 ！

于 2013-01-22T22:13:19.883 回答