Vista antes de imprimir ocultando elementos con JS y CSS
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.
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 ;
}
}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.
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
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.
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 ;
}
}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:
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
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
