3

Tengo un div

function imprSelec(historial){
  var ficha=document.getElementById(historial);
  var ventimp=window.open(' ','popimpr');
  ventimp.document.write(ficha.innerHTML);
  ventimp.document.close();
  ventimp.print();
  ventimp.close();
}
    <div id="historial">
      <h3><center>Mi contenido</center></h3>
      ...
    </div>
<a href="javascript:imprSelec('historial')">Imprimir</a>

Y quiero imprimirlo, lo he intentado así pero no me funciona, de hecho no hace nada. Pero quiero que solo se imprima el contenido del div historial conservando los estilos de éste.

Añado imágenes:

Así es como se ve en la web introducir la descripción de la imagen aquí

Y así es como se ve, más o menos está bien ya que le he puesto los estilos directamente en el atributo, aunque los colores de fondo no me los pone bien.

introducir la descripción de la imagen aquí

4
  • No va a conservar los estilos. El único navegador que conserva un poco de estilos es Chrome. Además, en tu <link de tus estilos agrega el atributo media="all".
    – gugadev
    Commented el 11 ene. 2017 a las 12:36
  • Y si en vez de utilizar el archivo css le pongo el atributo style directamente? Aunque eso no me lo soluciona todo ya que estoy utilizando el grid de bootstrap
    – Pavlo B.
    Commented el 11 ene. 2017 a las 15:35
  • Actualiza tu pregunta y pon un enlace para ver el resultado o, en caso no tengas, una imagen.
    – gugadev
    Commented el 11 ene. 2017 a las 15:37
  • actualizada la pregunta
    – Pavlo B.
    Commented el 12 ene. 2017 a las 9:06

2 respuestas 2

9

Prueba con esta función:

function printDiv(nombreDiv) {
     var contenido= document.getElementById(nombreDiv).innerHTML;
     var contenidoOriginal= document.body.innerHTML;

     document.body.innerHTML = contenido;

     window.print();

     document.body.innerHTML = contenidoOriginal;
}

Y llamándolo de la siguiente manera:

<div id="areaImprimir">
      <h3><center>Mi contenido</center></h3>
      ...
</div>

<input type="button" onclick="printDiv('areaImprimir')" value="imprimir div" />
4
  • Funciona pero no conserva los estilos (css)
    – Pavlo B.
    Commented el 11 ene. 2017 a las 10:14
  • ¿Podrías colocar aquí los estilos que le tienes puesto a tu div? Commented el 11 ene. 2017 a las 10:55
  • @cnbandicoot para que los estilos queden en el HTML que se va a imprime, el HTML debe contener esos estilos. Te recomiendo actualizar tu respuesta para mostrar cómo puedes concatenar los estilos al HTML. Commented el 11 ene. 2017 a las 16:37
  • Hola buen dia, muchas gracias por el ejemplo, me sirvio de mucho, de casualidad alguien sabra como quitar cuando se imprime Pagina 1 de 2 y la ruta url al final de la hoja?
    – user5019
    Commented el 11 dic. 2017 a las 21:02
1

Personalmente, aún sigo buscando una solución cross browser a éste problema. Por defecto, los estilos no se consideran al imprimir en la mayoría de browser. En el caso de Chrome, ni con media="all" he podido lograr que se conserven los estilos.

Supongo que en algún punto ésto se estandarizará, permitiendo imprimir con soporte CSS completo. Mientras tanto, hay que buscar las maneras para emular éste cometido.

Una manera de lograr ésto es convertir el documento a canvas y luego a imagen (por defecto PNG) por medio de HTMLCanvasElement#toDataURL. Una vez hecho ésto solo bastaría agregar la imagen a un tag <img> e imprimir el documento.

El problema principalmente que se tiene es que no hay forma de prevenir que el usuario imprima de la forma convencional a través del menú del navegadir, por eso debes asegurarte de dar una opción visible todo el tiempo para imprimir el contenido.

Te pongo un ejemplo usando la librería html2canvas y el evento keydown para interceptar la combinación Ctrl + p que es un acceso rápido a la opción de impresión del navegador, de tal manera que podamos prevenir la impresión por defecto y en su lugar, hagamos la nuesta. También se usa bootstrap para ver la calidad del renderizado.

document.addEventListener('keydown', function (e) {
  e.preventDefault();
  if (e.ctrlKey && e.key === 'p') {
    takeScreenshot(function (screenshot) {
      printPage(screenshot);
    });
  }
});

function printPage (screenshot) {
  var win = window.open('', 'prueba');
  win.document.write('<html>');
  win.document.write('<head></head>');
  win.document.write('<body>');
  win.document.write('<img src="' + screenshot + '"/>');
  win.document.write('</body>');
  win.document.write('</html>');
  win.print();
  win.close();
}

function takeScreenshot (cb) {
  html2canvas(document.getElementById('area'), {
    useCORS: true,
    onrendered: function (canvas) {
      var image = canvas.toDataURL();
      cb(image);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="area" class="container">
    <div class="jumbotron">
      <h2>Ejemplo de impresión</h2>
    </div>
    <table class = "table table-striped table-bordered">
       <caption>Usuarios activos</caption>
       
       <thead>
          <tr>
             <th>Name</th>
             <th>City</th>
             <th>Pincode</th>
            <th>Delete</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>John Doe</td>
             <td>Bangalore</td>
             <td>560001</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Lourdes Reitz</td>
             <td>Mumbai</td>
             <td>400003</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Angela Spoya</td>
             <td>Pune</td>
             <td>411027</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
       </tbody>
    	
    </table>
    </div>

Lo único que tendrías que hacer es asegurarte que tengas permisos para popups. Ésto puede evitarse haciéndose en el mismo documento, antes de llamar a window#print se pone la screenshot y se borra el nodo padre, y luego de llamarlo, se vuelve a poner el nodo. Puede tener algunas limitaciones si estás usando frameworks reactivos como React o Vue.

Nota: Al parecer StackOverflow bloquea las popups en su editor. He realizado un Pen para que lo veas en funcionamiento.

Soporte

Todos los navegadores que implementen Canvas:

  • IE 9+
  • Edge (todas las versiones)
  • Firefox 3.6+
  • Chrome 4+
  • Safari 4+
  • Safari iOS 3.2+
  • Opera 10.1+
  • Android browser 3+

No es perfecto, pero sí mucho mejor que la impresión por defecto.

2
  • Lo que he hecho al final es poner los estilos directamente en los tags de html con la etiqueta style así conserva alguno de los estilos que ya me va bien.
    – Pavlo B.
    Commented el 13 ene. 2017 a las 8:10
  • Tu codepen ya no está disponible Commented el 13 ene. 2020 a las 23:17

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