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:
@media print {
.oculto-impresion,
.oculto-impresion * {
display: none !important;
}
}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:
/*
Imprimir solo algunos elementos
con JavaScript y CSS
@author parzibyte
https://parzibyte.me/blog
*/
const $btnImprimir = document.querySelector("#btnImprimir");
$btnImprimir.addEventListener("click", () => {
let ocultos = document.querySelectorAll("p,strong,h1,h2,a,button,img");
ocultos.forEach(elemento => {
elemento.classList.add("oculto-impresion");
});
let mostrados = document.querySelectorAll(".forzar-impresion");
mostrados.forEach(elemento => {
elemento.classList.remove("oculto-impresion");
});
window.print();
});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í:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Imprimir algunos elementos al imprimir</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1 class="forzar-impresion">Imprimir algunos elementos al imprimir</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<p class="forzar-impresion">Este párrafo se imprime</p>
<p>Este no</p>
<div>
<p class="forzar-impresion">Hola, yo me imprimo</p>
<p><strong>Yo no</strong></p>
</div>
<h2 class="forzar-impresion">La siguiente imagen se imprime</h2>
<img class="forzar-impresion img-thumbnail" src="//picsum.photos/200"/>
<h2>La siguiente imagen NO se imprime</h2>
<img src="//picsum.photos/100"/>
<br>
<button id="btnImprimir" class="mt-2 btn btn-success">Imprimir</button>
</div>
</div>
</main>
<script src="script.js">
</script>
</body>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:
@media print {
.oculto-impresion,
.oculto-impresion * {
display: none !important;
}
}Y finalmente el script:
/*
Imprimir solo algunos elementos
con JavaScript y CSS
@author parzibyte
https://parzibyte.me/blog
*/
const $btnImprimir = document.querySelector("#btnImprimir");
$btnImprimir.addEventListener("click", () => {
let ocultos = document.querySelectorAll("p,strong,h1,h2,a,button,img");
ocultos.forEach(elemento => {
elemento.classList.add("oculto-impresion");
});
let mostrados = document.querySelectorAll(".forzar-impresion");
mostrados.forEach(elemento => {
elemento.classList.remove("oculto-impresion");
});
window.print();
});Lo que el usuario ve es esto:
Pero al momento de imprimir, solo los elementos marcados se muestran:
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
