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.
<link
de tus estilos agrega el atributomedia="all"
.css
le pongo el atributostyle
directamente? Aunque eso no me lo soluciona todo ya que estoy utilizando el grid de bootstrap