Como sabemos, ECMAScript (ES) es una especificación de lenguaje de secuencias de comandos estandarizada por ECMAScript International. Agrega nuevas características a javascript. Su especificación está influenciada por lenguajes como Self, Perl, Python, Java, etc. Algunos lo llaman JavaScript 6.
Entonces, imprimir la página es lo mismo. Mediante el uso de la función de impresión del objeto ventana. Imprime la página web actual (contenido original) cuando se ejecuta.
Sintaxis:
window.print()
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title>Print page</title> </head> <body> <center> <h1 style="color:Green">GeeksforGeeks</h1> <h3>Click on Print to print the page.</h3> <button type="button" onclick="window.print()"> Print </button> <!--prints the page--> </center> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Pero, no siempre queremos imprimir todo desde la página web. Si desea proporcionar una impresión solo con la información específica, puede hacerlo con la ayuda de la etiqueta <div>. En el siguiente ejemplo, un formulario que es el contenido completo/original, donde solo podemos imprimir la página web original que se muestra. No podemos imprimir la información del formulario rellenado. Como estamos asignando los contenidos originales a las variables para que se impriman pero no se modifiquen una vez.
Pero las páginas web no se limitan únicamente al texto. También hay otras cosas en las páginas web, como imágenes que consisten en diferentes colores, etc. La impresión de dichas páginas se puede hacer de las siguientes maneras:
- Haga una copia de la página y omita el texto y los gráficos basura (no necesarios), luego vincúlelos a la página de impresión desde el original. Esto significa que toda la página se imprimirá tal como ha visto la página, se imprimirá tal como está sin ningún cambio en ella, si ve un anuncio, también se imprimirá en él.
- Si no desea conservar una copia adicional de una página, puede marcar su texto imprimible usando los comentarios apropiados como IMPRIMIR COMIENZA AQUÍ… IMPRIMIR TERMINA AQUÍ y luego puede usar PERL o cualquier otro script en segundo plano para purgar texto imprimible y visualización para la impresión final. Esto significa que se imprimirá la parte seleccionada.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>Page printing</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h4>Print Specific Info</h4>
<div id="specificInfo">
<form>
Name:<br>
<input type="text" name="Name" />
<br><br>
E-mail:<br>
<input type="text" name="EMail" />
<br><br>
</form>
</div>
<form>
Phone:<br>
<input type="text" name="Ph" />
<br><br>
Favorite Guardian:
<select name="Country">
<option value="-1" selected>Choose</option>
<option value="1">Quill</option>
<option value="2">Gamora</option>
<option value="3">Groot</option>
<option value="4">Rocket</option>
<option value="5">Drax</option>
</select>
<br><br>
</form>
<input type="button" onclick="printDiv('specificInfo')"
value="Print" />
<script>
function printDiv(divName) {
// Makes the content in the div tag
// as the main and only content
// and assigns to this variable
var printContents =
document.getElementById(divName).innerHTML;
// Complete content of the page
var originalContent = document.body.innerHTML;
// printContents is assigned to innerHtml now
// the printable content is the div tag
document.body.innerHTML = printContents;
window.print(); // Prints the page
// originalContent is assigned to innerHtml
// now the printable content is the complete
// displayed page
document.body.innerHTML = originalContent;
// If prints the complete page
// window.print();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Nota: Aquí, el nombre y el correo electrónico se incluyen entre la etiqueta div , por lo que se convierte en la parte imprimible específica. Y cuando asignamos la parte imprimible al HTML interno, se convierte en el contenido completo de la página y se imprime.