Cómo imprimir en JavaScript | Explicado con ejemplos

Si eres nuevo en JavaScript, es posible que estés buscando una manera de imprimir el contenido de tu página web o consola utilizando JavaScript. Imprimir en JavaScript puede ser muy útil en muchas situaciones, como cuando estás creando una página web que necesitas imprimir o cuando necesitas imprimir algún tipo de información en tu consola al probar código.

En este artículo, te mostraremos cómo imprimir en JavaScript a través de diferentes métodos y ejemplos prácticos. A continuación, te presentamos una lista de encabezados que abordaremos:

Métodos de impresión en JavaScript

window.print()

El método print() es una función incorporada en la mayoría de los navegadores web y se utiliza para imprimir la página actual en la que se está navegando. Al hacer clic en el botón de impresión o al usar la función print(), se imprimirá la página web actual.

Document.write()

El método document.write() se utiliza para escribir directamente en el documento HTML. Al utilizar este método, cualquier texto pasado como argumento se escribirá directamente en el documento, justo en el lugar donde se encuentre la función.

innerHTML

La propiedad innerHTML se utiliza para obtener o establecer el contenido HTML de un elemento específico de la página web. Al utilizar esta propiedad, es posible imprimir el contenido de cualquier elemento HTML en la página.

Ejemplos prácticos de impresión en JavaScript

Ahora que ya conoces los métodos para imprimir en JavaScript, veamos algunos ejemplos prácticos para que puedas entender mejor sus diferentes usos:

Ejemplo 1: Imprimir la página actual con window.print()


function imprimirPagina() {
window.print();
}


En este ejemplo, se crea una función que utiliza la propiedad window.print() para imprimir la página actual. Al hacer clic en un botón que llame a esta función, se abrirá la ventana emergente de impresión predeterminada del navegador y se imprimirá la página actual.

Ejemplo 2: Escribir texto en el documento con document.write()


document.write("Este es un ejemplo de texto escrito directamente en el documento HTML.");


En este ejemplo, se utiliza el método document.write() para escribir directamente en el documento HTML. Este método es especialmente útil cuando necesitas agregar texto en tiempo real al documento.

Ejemplo 3: Imprimir el contenido de un elemento HTML con innerHTML


var contenido = document.getElementById("contenido-a-imprimir").innerHTML;
document.write(contenido);


En este ejemplo, se crea una variable llamada contenido que utiliza la propiedad innerHTML para obtener el contenido de un elemento HTML específico de la página (en este caso, el elemento con el ID "contenido-a-imprimir"). Luego, se utiliza el método document.write() para escribir ese contenido directamente en el documento HTML.

Ejemplos de código

En esta sección, te proporcionamos algunos ejemplos de código para que puedas probar los diferentes métodos de impresión en JavaScript:

Código 1: Imprimir la página actual con window.print()


Imprimir página


En este código, se crea un botón que llama a la función window.print() para imprimir la página actual al hacer clic en el botón.

Código 2: Escribir texto directamente en el documento con document.write()


Escribir en el documento


En este código, se utiliza el método document.write() para escribir un texto directamente en el documento HTML al hacer clic en el botón.

Código 3: Obtener el contenido de un elemento HTML con innerHTML y escribirlo en el documento con document.write()


Imprimir contenido

En este código, se utiliza la propiedad innerHTML para obtener el contenido del elemento HTML con el ID "contenido-a-imprimir" y se escribe directamente en el documento HTML al hacer clic en el botón.

Conclusión

Como puedes ver, hay varias maneras de imprimir en JavaScript, y cada método tiene su propio uso y propósito. Si estás buscando imprimir en una página web o en la consola, deberías considerar si la función print() es la adecuada para ti o si necesitas mostrar información específica en un elemento HTML utilizando innerHTML o document.write().

Preguntas frecuentes

¿Cómo imprimir en una página web con JavaScript?

Para imprimir en una página web con JavaScript, se puede utilizar la función window.print() para imprimir la página actual abriendo la ventana emergente de impresión del navegador.

¿Cómo escribir directamente en el documento HTML con JavaScript?

Para escribir directamente en el documento HTML con JavaScript, se puede utilizar el método document.write() pasando el texto deseado como argumento.

¿Cómo imprimir el contenido de un elemento HTML con JavaScript?

Para imprimir el contenido de un elemento HTML con JavaScript, se puede utilizar la propiedad innerHTML para obtener el contenido del elemento y luego escribirlo directamente en el documento HTML con el método document.write().

Función hash() de JavaScript explicada

Cómo cambiar la versión de Node.js

Cómo Tokenizar una Cadena en JavaScript

JavaScript - Obtener el nombre del tipo de objeto

Cómo convertir un objeto JSON en un array de JavaScript

Cómo recortar todos los elementos en una matriz en JavaScript

Cómo esperar a que se resuelvan las Promesas en JavaScript

Cómo ordenar un arreglo de objetos por propiedad en JavaScript

JavaScript: El equivalente a printf o String.Format