HTML Code
Funciones básicas y elementales para imprimir una página
Códigos para insertar en el código fuente de la página, para crear un vínculo, link o botón que posibilite y facilite al usuario imprimir la página y que no tenga que utilizar las opciones de su navegador web o de terceros.Código para imprimir página desde un enlace:
<a href="javascript:window.print()">Imprimir</a>
Código para imprimir página desde un botón:
<button type="button" onclick="javascript:window.print()">Imprimir</button>
Ejemplos prácticos
Imprimir bloque de texto
Imprimir solo el siguiente o bloque de texto.
La vista previa de la sección a imprimir se abre en una nueva pestaña del navegador, por lo que no se carga las reglas CSS, que definen su estilo.
Para solucionarlo se debe insertar la regla de estilo inline, en el contenedor.
El código empleado en este ejemplo es el siguiente:
HTML
<div id="imp1"><div style="background-color:#d4eefd;padding:12px;margin:12px 0 12px 0;">
Bloque de texto a imprimir
</div></div>
<button type="button" onclick="javascript:imprim1(imp1);">Imprimir</button>
JAVASCRIPT
<script>
function imprim1(imp1){
var printContents = document.getElementById('imp1').innerHTML;
w = window.open();
w.document.write(printContents);
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
w.print();
w.close();
return true;}
</script>
Imprimir una tabla
En el siguiente ejemplo se imprime la siguiente tabla usando un botón.
La vista previa de la sección a imprimir se abre en una ventana emergente.
La regla CSS se define en el script usado, para mantener su estilo.
| Columna 1 | Columna 2 |
|---|---|
| datos... | datos.... |
| datos... | datos... |
El código empleado en este ejemplo es el siguiente:
HTML
<div id="muestra">
<table id="muestra" class="tabla">
<tr><th>Columna 1</th><th>Columna 2</th></tr>
<tr><td>datos...</td><td>datos....</td></tr>
<tr><td>datos...</td><td>datos...</td></tr>
</table></div>
<button type="button" onclick="javascript:imprim2();">Imprimir</button>
JAVASCRIPT
<script>
function imprim2(){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head>');
mywindow.document.write('<style>.tabla{width:100%;border-collapse:collapse;margin:16px 0 16px 0;}.tabla th{border:1px solid #ddd;padding:4px;background-color:#d4eefd;text-align:left;font-size:15px;}.tabla td{border:1px solid #ddd;text-align:left;padding:6px;}</style>');
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById('muestra').innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necesario para IE >= 10
mywindow.focus(); // necesario para IE >= 10
mywindow.print();
mywindow.close();
return true;}
</script>
Es posible en una misma página web encerrar diferentes secciones en distintos contenedores o DIV con diferentes identificadores cada uno, en ese caso serían necesarios igual cantidad de funciones de javascript en las que cambiaría solo el nombre que referencia al identificador.