Informaciones de Windows » Imprimir área de una página web
Como imprimir solo un área, parte o sección de una página web o4456
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 1m552c
Crear enlaces, links o botones para imprimir una página web 7x6l
Funciones básicas y elementales para imprimir una página e268
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 3h28q
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 6b41z
Imprimir bloque de texto 3i2v3o
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 632o4m
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... |