Resumen

En este post te voy a mostrar a ocultar elementos al imprimir una página web, exceptuando algún elemento como un párrafo, imagen o encabezado.

Por ejemplo, imprimir algo con Javascript y CSS pero quitando algunos elementos excepto un contenedor o elementos que cumplan cierto criterio.

Para lograrlo vamos a usar CSS y Javascript. El CSS será usado para ocultar al imprimir, y el JavaScript para agregar y remover algunas clases al momento de imprimir.

Primero: la clase CSS

Debemos definir la clase CSS para ocultar elementos en la impresión. Esa clase no la vamos a aplicar a los elementos manualmente, sino con JavaScript.

Por lo tanto, a nuestros estilos agregamos lo siguiente:

See the gist on github.

Eso hará que se oculten los elementos al imprimir, debemos agregar esa clase (oculto-impresion) a cada elemento que queremos ocultar al imprimir, exceptuando aquel que deseemos conservar.

Como es muy tedioso hacerlo manualmente, mejor usamos JavaScript.

Paso 2: la clase para forzar la impresión

A los elementos que vamos a mostrar en la impresión hay que ponerles una clase en común para poder recuperarlos. En mi caso pondré la clase forzar-impresion

Paso 3: agregar y remover clases con JavaScript

Al momento de imprimir, vamos a agregar y remover las clases.

Primero vamos a obtener todos los elementos (enlaces, párrafos, encabezados, imágenes) y agregarles la clase oculto-impresion

Después, vamos a obtener los elementos que tienen la clase forzar-impresion y removerles la clase oculto-impresion

En otras palabras, primero ocultamos todos los elementos y después desocultamos solo algunos:

See the gist on github.

En la línea 13 obtenemos todos los elementos separados por comas, aquí también podríamos obtener por clase y todo eso.

Lo que se obtiene es: párrafo, strong, encabezado, botón, imagen. En tu caso coloca ahí los elementos y por favor no pongas el * porque no funcionará.

En la línea 14 le agregamos la clase oculto-impresion a todos esos elementos usando classList.add.

Después, en la línea 17 obtenemos los elementos que sí queremos mostrar con la clase forzar-impresion

Finalmente en la línea 19 le removemos a todos esos elementos la clase oculto-impresion con classList.remove

En la línea 21 finalmente imprimimos el documento usando window.print.

Todo ese proceso está dentro del click de un botón.

Ejemplo de impresión removiendo elementos con JavaScript

Comenzamos definiendo nuestra plantilla. Voy a usar Bootstrap 4 aunque no importa, pues esto de las clases y lo oculto se puede usar en cualquier lugar.

El diseño queda así:

See the gist on github.

El botón que desencadena esto está en la línea 36. Fíjate en la línea 19, 22, 26, 29 y 31, pues esos elementos se van a imprimir.

En los estilos CSS agregamos la clase:

See the gist on github.

Y finalmente el script:

See the gist on github.

Lo que el usuario ve es esto:

Pero al momento de imprimir, solo los elementos marcados se muestran:

Si quieres probarlo por ti mismo puedes verlo aquí.

Conclusión

Con este método podemos ser más minuciosos a la hora de imprimir, ya que con JavaScript se puede manipular el DOM de una manera más precisa, agregando y quitando clases para que finalmente CSS se encargue de hacer el resto.

De igual forma, con este enfoque se podrían ocultar elementos a la vista del usuario y mostrarlos únicamente en la impresión.

Te invito a leer más sobre JavaScript, CSS o la web en general dentro de mi blog