Print a DIV keeping the CSS

Question

Print a DIV keeping the CSS

Navigation

#1 by (3 votes)

0

I try to print a "div" in which there is a "proof of an order, I can not keep the CSS styles when I open the print window.

This is my function:

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

And this the DIV to print:

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

It is empty, since it is filled from ajax, but the case that loses the css:

How could I fix this? Thanks and regards.

javascript jquery php ajax print

asked by Javier Avila Fernandez 30.08.2018 в 10:32

source

1 answer

Align float in div Send data of a query by email with html format

score 3 · Accepted Answer

You could use an @media. There is a specific one to manage the styles that will be used in printing:

CSS

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

You could also use a different style sheet for printing styles. This way of doing it is mostly supported by browsers:

HTML

<link rel="stylesheet" type="text/css" href="print.css" media="print" />