Las imágenes no se muestran al imprimir Vista previa (o Imprimir) en IE/Chrome/Firefox

Question

Soy desarrollador web y casi nunca trabajo con diseño, pero me han dado este error que estoy tratando de corregir.

Algunas imágenes aparecen correctamente cuando imprimo/visualizo la página de vista previa de impresión, pero otras no. La diferencia clave que puedo ver es que las imágenes que no aparecen son etiquetas de tramo con la imagen aplicada en css, mientras que las imágenes que funcionan usan la etiqueta img.

Éstos son ejemplos del HTML:

Span con "icono" nacimiento no lo hace pantalla:

<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 hace pantalla:

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

En algunos buscadores se ve bien en la vista previa pero no se imprime, en otros no y aún no impresión.

¡Gracias de antemano!

Answer 1

Tuve el mismo problema hace más de dos meses. Tenía un botón que redirigía a los usuarios a una página para imprimir y luego activé el cuadro de diálogo de impresión utilizando Javascript.

El problema fue que los navegadores no esperaron hasta que se descargaron las imágenes especificadas en el fondo de CSS.

Pongo tiempo de espera antes de activar el diálogo de impresión para dar tiempo al navegador para descargar imágenes. Este enfoque no es confiable ya que nadie tiene velocidad de descarga constante y abriría el cuadro de diálogo de impresión antes de que las imágenes se descarguen a los usuarios con una conexión a Internet muy lenta.

Al final, utilicé etiquetas HTML img para incrustar imágenes en mi página y jQuery para activar el cuadro de diálogo de impresión cuando se descargó la última imagen.

Answer 2

crea una hoja de estilos de impresión, pon tu lapso de display: block

Answer 3

Es necesario poner retraso antes de la impresión. Hay un error nativo en cromo. Código haría, conforme a: -

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

Sólo tiene que añadir los estilos a continuación para hacer que funcione img {max-width: 100%; height: auto;}

Es el ancho de la imagen que se establece en 0 en la impresión que está causando el problema.