En determinadas ocasiones, puede ser necesario imprimir el contenido de un determinado bloque de un sitio web, por ejemplo, en caso de un código que necesite ser guardado, los datos de una reserva, etc. En esos casos, podemos hacer uso de JavaScript y, con un sencillo código que os muestro a continuación.
function printDOM(elementId) {
var contentToPrint = document.getElementById(elementId).innerHTML;
var page = document.body.innerHTML;
document.body.innerHTML = contentToPrint;
window.print();
document.body.innerHTML = page;
}
Como podéis observar, el truco consiste en guardar en una variable el contenido que queremos imprimir y en otra variable el contenido original de la página. Seguidamente, reemplazamos el contenido de la página por el que queremos imprimir y ejecutamos la impresión mediante window.print(). Finalmente, volvemos a establecer el contenido de la página por el original.
Espero que os sirva de ayuda este pequeño truco que amplía el uso habitual que os explicaba en este otro artículo.
Actualización 03 enero 2017 (by Eduard Tomás)
Tal y como expone maese Eduard en los comentarios, es más eficiente crear un objeto windows para imprimir el contenido que deseamos imprimir (copio y pego el código de Eduard)
// data es el HTML a imprimir (el contenido del elemento)
var pw = window.open('', 'my div', 'height=400,width=600');
pw.document.write('<head></head><body>');
pw.document.write(data);
pw.document.write('</body>');
pw.print();
pw.close();
Enjoy coding!!
NO necesitas serializar todo el DOM, luego cargártelo y finalmente reconstruirlo de nuevo!
Es muy ineficiente!
Crea un objeto window, añade un DOM válido al documento e imprime esa nueva ventana!
// data es el HTML a imprimir (el contenido del elemento)
var pw = window.open(», ‘my div’, ‘height=400,width=600’);
pw.document.write(»);
pw.document.write(data);
pw.document.write(»);
pw.print();
pw.close();
Pues sí. Mucha razón llevas maese Eduard. Actualizo el artículo con tu comentario.
😉
Una cosa, el parser de comantarios se ha cargado el html.
Dentro del primer write había el
Lo pongo entre corchetes para que no se lo cargue, pero son tags HTML, claro 😛
Corregido, aunque si no me equivoco funciona igual sin eso porque lo añade automáticamente. Lo voy a probar en 3,2,1…