Informaciones de Windows » Imprimir área de una página web
Como imprimir solo un área, parte o sección de una página web p5p4g
Herramientas que hacen posible eliminar de la página los elementos innecesarios e imprimir el que nos interesa. Bookmarklets para imprimir solo lo necesario. Códigos de JavaScript para crear vínculos o botones En las páginas que permitan al lector la impresión de una selección o solo un bloque específico.
Todos los navegadores web incluyen la posibilidad de imprimir la página web que representan, funciona utilizando la función de javascript window.print(), pero la desventaja es que no existen opciones para que el pueda imprimir solo lo que necesite.
Cualquier página tiene una multitud de elementos que no forman parte de su contenido y que la mayor parte de las ocasiones no nos interesa.
Algunas páginas son diseñadas proporcionando al la opción de imprimir solo un área, ya sea una tabla, un bloque de texto, etc. pero son muy pocas la que ofrecen esta posibilidad.
Existen varios métodos que nos permiten lograr imprimir solo lo que verdaderamente necesitemos.
Podemos dividirlos en dos grandes grupos, los métodos a utilizar los s directamente desde el navegador web y los que pueden emplear los desarrolladores o cualquiera que tenga al código fuente o HTML de estas y por lo tanto puedan modificarlo a su antojo.
No es nada difícil, no es necesario poseer conocimientos avanzados de diseño web ni de javascript, solo es necesario copiar y pegar.
Empezaremos de lo más sencillo y elemental a lo más difícil
Métodos o formas de imprimir una página web 6ha2k
Crear enlaces, links o botones para imprimir una página web 3e5v5w
Funciones básicas y elementales para imprimir una página 106y12
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 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>
Código para disponer de la función de imprimir desde una imagen:
<a href="javascript:window.print()"><img src="ruta-imagen" alt=""></a>
Imprimir solo una área o sección de una página web 436f24
Para imprimir solo un área o sección de una página web, son necesarios tres requisitos:
➔ Que el área o sección seleccionada este encerrada en un contenedor DIV, que posea un identificador que tiene que ser único.
➔ Incrustar el código con la función de JavaScript que haga referencia al identificador del contenedor.
➔ Usar un evento como un enlace o botón, para llamar la función de imprimir.
En los siguientes ejemplos se usa un botón para ejecutar la función que permite imprimir en el primer caso un bloque de texto y en el segundo caso, una tabla.➔ Incrustar el código con la función de JavaScript que haga referencia al identificador del contenedor.
➔ Usar un evento como un enlace o botón, para llamar la función de imprimir.
Ejemplos prácticos a4v2i
Imprimir bloque de texto 2l2s2p
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.
Bloque de texto a imprimir con el estilo insertado inline.
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 464x22
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... |