JavaScript

JavaScript tips & tricks | Imprimir un elemento específico del DOM

poster-wide

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!!

Tips & Tricks | Usar JavaScript para extraer fácilmente la extensión de un fichero

poster-wide

En este artículo escribiré un truco sencillo para leer la extensión de un fichero mediante JavaScript pensando, no sólo en conocer dicha extensión, sino además en guardarla en una variable para poder realizar acciones como agregar un icono, emparejarlo con una clase de CSS, etc.

Continue reading…