在IE/Chrome/Firefox中打印預覽（或打印）時不顯示圖像

我是Web開發人員，幾乎從不使用設計，但已經給出了我正在努力糾正的這個錯誤。在IE/Chrome/Firefox中打印預覽（或打印）時不顯示圖像

當我打印/顯示打印預覽頁面時，某些圖像顯示正確，但其他圖像不顯示。我可以看到的關鍵區別在於，不出現的圖像是在css中應用圖像的span標籤，而工作圖像使用img標籤。

下面是HTML的例子：

跨度與「圖標」出生不顯示：

<li class="media"> 
    <div class="img"> 
     <div class="h2 mtm">1889</div> 
     <span class="timeline-icon icon-birth"></span> 
    </div> 
    <div class="bd"> 
     <h3 class="profile-subtitle mts">Born in ?</h3> 
     <p class="deemphasis mbn"> 
     <a href="/search/results/bmdindexedbirths/bibby/elizabeth%20?yearofbirth=1889">Search  for Birth Record</a> 
     </p> 
    </div> 
</li>

Image.gif的確實顯示：

<li class="media"> 
    <div class="img"> 
     <div class="h6"> 
      <strong>Spouse</strong></div> 
      <img src="image.gif" alt="" class="person-thumb dropshadow" /> 
     </div> 
    <div class="bd"> 
     <p class="mbn">Husband</p> 
     <h3 class="profile-subtitle"> 
      <a href="path">Thomas&nbsp;<strong>Name</strong></a> 
     </h3> 
     <p class="mbn">?&#45;?</p> 
    </div> 
</li>

在一些瀏覽器在預覽中看起來不錯，但不打印，而在其他瀏覽器中則沒有，仍然沒有打印。

提前謝謝！

來源

2012-09-20 IntoTheBlue

圖像沒有打印，因爲它們是背景圖像，瀏覽器設置爲不打印這些圖像。這可以在某些瀏覽器中手動更改。解決方案是使用html img標籤而不是跨度。 – IntoTheBlue

兩個月前我有同樣的問題。我有一個按鈕，將用戶重定向到一個打印友好的頁面，然後使用Javascript觸發打印對話框。

問題在於瀏覽器沒有等到下載了CSS背景中指定的圖像。

我在觸發打印對話框前給超時，讓瀏覽器有時間下載圖像。這種方法是不可靠的，因爲沒有人有恆定的下載速度，它會打開對話框，然後將圖像下載到互聯網連接速度非常慢的用戶。

最後，我使用HTML img標記在我的頁面和jQuery中嵌入圖像，以便在下載最後一張圖像時觸發打印對話框。

來源

2012-09-21 14:38:35 DaveTsunami

事實證明，由於瀏覽器的默認設置是不打印背景圖像，因此圖像沒有顯示在我的案例中。這可以在一些瀏覽器中手動設置，但不是全部。解決方案是使用HTML img標籤。 – IntoTheBlue

製作打印樣式表，將您的範圍設置爲顯示：塊

來源

2012-09-21 15:11:50 albert

您需要延遲打印之前。 Chrome中有一個本地錯誤。代碼將作爲下： -

function PrintDiv(data) { 
    var mywindow = window.open(); 
    var is_chrome = Boolean(mywindow.chrome); 
    mywindow.document.write(data); 

    if (is_chrome) { 
    setTimeout(function() { // wait until all resources loaded 
     mywindow.document.close(); // necessary for IE >= 10 
     mywindow.focus(); // necessary for IE >= 10 
     mywindow.print(); // change window to winPrint 
     mywindow.close(); // change window to winPrint 
    }, 250); 
    } else { 
     mywindow.document.close(); // necessary for IE >= 10 
     mywindow.focus(); // necessary for IE >= 10 

     mywindow.print(); 
     mywindow.close(); 
    } 

    return true; 
}

來源

2015-10-30 05:43:09

只需添加下面的樣式，使其工作IMG {最大寬度：100％;高度：自動;}

其圖像的寬度設置爲0在導致問題的印刷品中。

來源

2016-05-17 08:22:23

在IE/Chrome/Firefox中打印預覽（或打印）時不顯示圖像

回答

相關問題