在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