Imprimir página en HTML

1. Oculte los contenidos con display:none dentro de @media print para imprimir un contenido específico en HTML
2. Pase el id al detector de eventos onClick para imprimir un contenido específico en HTML

Este artículo presentará algunos métodos para imprimir el contenido específico de una página en HTML.

Oculte los contenidos con display:none dentro de @media print para imprimir un contenido específico en HTML

Podemos usar CSS para cambiar la apariencia de la página web cuando se imprime en papel. Podemos configurar un estilo CSS en la web y otro estilo CSS mientras imprimimos los contenidos web.

La regla CSS @media print le permite cambiar el estilo de los contenidos HTML mientras los imprime.

Necesitamos JavaScript para imprimir el contenido HTML. El método window.print() le permite imprimir la ventana actual.

El método print() abre el cuadro de diálogo Print, que le permite seleccionar las opciones de impresión preferidas. Podemos llamar a window.print() después de hacer clic en un botón para imprimir la ventana actual.

Usando @media print, podemos establecer la propiedad display en none para los contenidos HTML, que no queremos imprimir. Esto no mostrará los contenidos HTML dentro de la opción de impresión a pesar de tener esos contenidos en la web.

Por ejemplo, en HTML, cree dos encabezados usando la etiqueta h1. Nombra el primer encabezado como Need to print this y el segundo encabezado como Don't need to print this.

Proporcione el nombre de la clase para el segundo encabezado como dontPrint. Luego crea un botón y llámalo Imprimir.

Además, asigne a este botón un nombre de clase de dontPrint. Cree un oyente onClick para el botón y llame al método window.print() cuando se haga clic en el botón.

En la sección CSS, dentro de @media print, establezca la propiedad de visualización de la clase llamada dontPrint en none.

El siguiente ejemplo muestra que el título y el botón que tienen el nombre de clase dontPrint no se muestran en la sección de impresión cuando se hace clic en el botón Print.

Código de ejemplo:

<h1>
  Need to print this
</h1>
<h1 class="dontPrint">
  Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
  Print
</button>

@media print {
 .dontPrint{
 display:none;
 }
}

Pase el id al detector de eventos onClick para imprimir un contenido específico en HTML

En este método, podemos crear un id del contenido específico a imprimir. Luego, podemos pasar el id a una función de JavaScript con la ayuda del detector de eventos onClick.

El JavaScript imprime el contenido especificado con el método window.print().

La propiedad innerHTML establece o devuelve el contenido HTML de un elemento. Podemos usarlo para seleccionar el contenido impreso en JavaScript junto con el método document.getElementById().

Del mismo modo, podemos conservar el contenido original del documento HTML utilizando la propiedad innerHTML junto con la propiedad document.body. Después de imprimir el contenido, podemos establecer el contenido original del documento HTML en la propiedad document.body.innerHTML.

Veamos las instrucciones a continuación para entenderlo más claramente.

Por ejemplo, crea un div y dale un id de printIt. Dentro de ese div, cree una etiqueta h1 y escribe Need to print this dentro de ella.

Fuera del div, crea un button y llámalo Print. Crea un onclick para el botón y llama a la función printOut con el id de printIt como parámetro.

En la sección de JavaScript, cree una función llamada printOut con un argumento divId. Cree una variable llamada printOutContent para almacenar innerHTML del divId.

A continuación, cree otra variable originalContent para almacenar el innerHTMl del cuerpo HTML. La demostración se muestra a continuación.

var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;

A continuación, establezca innerHTML del cuerpo en la variable printOutContent.

Luego, llama al método window.print(). Después de llamar al método, establezca innerHTML del cuerpo en la variable originalContent.

document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;

Aquí, cuando llamamos al método window.print(), solo imprimirá la sección de la identificación divId ya que document.body.innerHTML contiene solo el elemento que se imprimirá. Una vez que se imprime el contenido, el contenido de todo el documento HTML se establece en su estado original.

Por lo tanto, imprimimos un contenido específico de un documento HTML usando JavaScript.

Código de ejemplo:

<div id="printIt">
  <h1>
    Need to Print this
  </h1>
</div>
<button onClick="printOut('printIt')">
  Print
</button>

function printOut(divId) {
  var printOutContent = document.getElementById(divId).innerHTML;
  var originalContent = document.body.innerHTML;
  document.body.innerHTML = printOutContent;
  window.print();
  document.body.innerHTML = originalContent;
}