如何顯示上打印

JS生成IMG我有下面的代碼：如何顯示上打印

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; 
});

它能做什麼，是當有人點擊按鈕#PRINT，包含谷歌標誌的小窗口已經打開打印彈出窗口。不幸的是，當我在紙上或PDF上打印時，圖像沒有出現 - 顯示它是alt屬性。

我該如何解決這個問題？

來源

2014-07-24 zorza

我剛剛在使用Chrome的Windows 8.1上試用了JSBin這裏的http://jsbin.com/catubuwa/1/edit?html,js,output代碼，它看起來像打印到.pdf文件時所期望的那樣工作得很好。但是，我似乎注意到可能存在爭用條件和加載時間問題。也許在你的情況下，頁面正在加載並準備好在頁面或圖像完全加載之前進行打印？

如果這是發生了什麼，我已經添加了一個基本的.ready（）爲您的myWindow然後打印：。但是如果你注意到我已經取消了收盤。這也似乎有所幫助。原因在於打印功能實際上是在該窗口上調用的，因此是打印對話框。這將根據瀏覽器而有所不同，但接近也似乎對打印也有影響。

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)); 
}); 

});

也許暫存過程可能有助於確保在打開並構建新窗口時準備打印所有內容。

工作副本：

http://jsbin.com/catubuwa/1/edit?html,js,output

參考文獻：

來源

2014-07-24 12:24:19

它在http://jsbin.com/zosejate/1/edit?html,js,output上爲你工作嗎？我已經嘗試過FF，Chrome，Opera和IE上的這個jsbin，並且它不打印任何圖像。在3臺不同的電腦上測試 – zorza

它看起來像是第一次使用並且圖像未加載，那麼它不起作用。然後，一旦圖像加載或緩存在瀏覽器中，它似乎每次都工作，因爲它是一個304快速圖像加載。我正在嘗試檢測圖像何時加載。這將有助於保證在打印開始之前所有資產都存在並加載。 –

你可以試試這個jsbin的例子 - http://jsbin.com/catubuwa/1/edit?html,js,output我所做的只是添加一個超時給窗口一個後續調用後來相當。這不是一個非常優雅的解決方案，我真的不推薦它，但它可以幫助你真正看到發生了什麼。確保您清除歷史記錄並從頭開始加載窗口，以便加載圖像。看起來確保img的加載對於獲得期望的打印效果至關重要。 –

如何顯示上打印

回答

相關問題