1

intento mandar a imprimir un "div" en el que aparece un "comprobante de un pedido, no consigo mantener los estilos CSS cuando me abre la ventana de imprimir.

Esta es mi función:

function printDiv(divVer) {
        var printContents = document.getElementById(divVer).innerHTML;
        var document_html = window.open("_blank");
         document_html.document.write( "<html><head><title>Imprimir Pedido</title>" );
         document_html.document.write( "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/styles.css\" media=\"all\">" );
         document_html.document.write( "</head><body>" );
         document_html.document.write( printContents );
         document_html.document.write( "</body></html>" );
         setTimeout(function () {
               document_html.print();
           }, 500)
}

$(document).on('click','#imprimirPedido' ,function() {
    printDiv('divVer')
});

Y este el DIV a imprimir:

          <div id="divVer" class="columna">
              <h4 class="titulo">Detalles del Pedido</h4>
          </div>

Se encuentra vacío, ya que se rellena desde ajax, pero el caso que pierde el css:

Esto es el DIV Est es lo que me sale al Imprimir

  • ¿Como podría arreglar esto? Gracias y saludos.

2 respuestas 2

4

Podrías usar un @media. Existe uno específico para gestionar los estilos que se usaran en la impresión:

CSS

@media print {
  /* Reglas CSS para impresión */
}

También podrías usar un hoja de estilos diferente para los estilos de impresión. Esta manera de hacerse se encuentra mayormente soportada por los navegadores:

HTML

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
4
  • Okey, me coje algunos estilos! pero no consigo que la fuente me la muestre!! ¿Tal vez sea por que es de google fonts? Commented el 30 ago. 2018 a las 8:58
  • 1
    Puedes probar a descargarte la fuente y cargarla con un @font-face en vez de importarla directamente desde google fonts.
    – phpMyGuel
    Commented el 30 ago. 2018 a las 9:03
  • 2
    No hace falta descargar la fuente, copia la direccion del import de google y pegala en el navegador, te saldra el css que esta importando, y copia el font face de ahi.
    – Montaycabe
    Commented el 30 ago. 2018 a las 9:10
  • Buen truquillo, no lo conocía. ¡Gracias por el aporte!
    – phpMyGuel
    Commented el 30 ago. 2018 a las 9:23
0

bueno al parecer hay una solución sencilla con google Crome te da una opcion que dice "GRAFICOS EN SEGUNDO PLANO" y claro al marcar esta opcion se vera tal cual la quieres .... suerte

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.