Vista general - antes de imprimir

Javascript – mostrar solo algunos elementos al imprimir página web

Dejar un comentario / css, HTML, javascript, web / Por

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:

Vista general - antes de imprimir
Vista antes de imprimir ocultando elementos con JS y CSS

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

Elementos ocultos al imprimir
Ocultando algunos elementos en la vista de impresión

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

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *