Obrazy nie wyświetlają się, gdy Podgląd wydruku (lub drukowanie) w IE/Chrome/Firefox

Question

Jestem programistą internetowym i prawie nigdy nie pracuję nad projektem, ale otrzymałem ten błąd, który staram się naprawić.

Niektóre obrazy są wyświetlane poprawnie po wydrukowaniu/wyświetleniu strony podglądu wydruku, ale inne nie. Kluczową różnicą, jaką widzę, jest to, że obrazy, które nie pojawiają się, są znacznikami zakresu z obrazem zastosowanym w css, podczas gdy obrazy robocze używają znacznika img.

Oto przykłady HTML:

Span z "ikona" narodziny nie display:

<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 robi display:

<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> 

W niektóre przeglądarki wyglądają dobrze w podglądzie, ale nie drukuje, w innych nie, a nadal nie drukuj.

Dziękuję z góry!

Answer 1

Miałem ten sam problem ponad dwa miesiące temu. Miałem przycisk, który przekierowywał użytkowników na stronę przyjazną dla drukarki, a następnie uruchomiłem dialog drukowania za pomocą Javascript.

Problem polegał na tym, że przeglądarki nie czekały, aż zostaną pobrane obrazy określone na tle CSS.

Przedłużam limit czasu przed wywołaniem okna dialogowego drukowania, aby dać przeglądarce czas na pobranie obrazów. Takie podejście nie jest niezawodne, ponieważ nikt nie ma stałej prędkości pobierania i otwiera okno dialogowe drukowania, zanim obrazy zostaną pobrane do użytkowników z bardzo wolnym połączeniem z Internetem.

W końcu użyłem tagów HTML img do osadzenia obrazów na mojej stronie i jQuery, aby wywołać okno dialogowe drukowania po pobraniu ostatniego obrazu.

Answer 2

dokonać stylów wydruku, ustaw zakres na display: block

Answer 3

Musisz umieścić opóźnienie przed drukiem. Istnieje natywny błąd w chrome. Kod będzie w ramach: -

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

Answer 4

Wystarczy dodać poniższych stylów, aby to działało img {max-width: 100%; height: auto;}

Jego szerokość obrazu jest ustawiony na 0 w druku, który jest przyczyną problemu.