NorfiPC
NorfiPC » Informaciones de Windows » Imprimir área de una página web

Como imprimir solo un área, parte o sección de una página web



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.
Imprimir solo una área de una pagina web 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 usuario 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 usuario 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 usuarios directamente desde el navegador web y los que pueden emplear los desarrolladores o cualquiera que tenga acceso 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


Usar un Bookmarklet para imprimir una página web


Es la herramienta elemental, solo arrástralo a la barra de marcadores del navegador para utilizarlo desde allí, dando un clic e imprimir la página, no existen opciones ni configuraciones para su uso: Imprimir

Bookmarklet para recortar una página web


Este Bookmarklet podemos tenerlo disponible de la misma forma que el anterior pero la gran diferencia es que permite recortar los elementos de la página que nos son innecesarios, dejando solo el contenido que necesitamos imprimir.
Utilizarlo es sencillo, al dar clic en el Bookmarklet veremos que al mover el mouse por encima de la página, los bloques que encierran los distintos elementos toman el color amarillo.
Solo da un clic cuando el área sombreada sea la que deseas eliminar.
El Bookmarklet activa también una pequeña barra de herramientas de color rojo con tres opciones:
✓ Imprimir. Manda a imprimir la pagina
✓ Quitar. Deshabilita temporalmente la función
✓ Atrás. Deshacer la acción anterior.
Para comenzar desde el principio solo vuelve a cargar la página.
Usar un Bookmarklet para recortar los elementos de una pagina que no se desean imprimir
Puedes utilizarlo offline, es decir sin conexión para imprimir páginas que se encuentren guardadas en el equipo, en ningún momento se afectara ni modificara el código original de la página en la que se hagan los recortes: Recortar.



Bookmarklet para editar página web


Bookmarklet que funciona de forma algo parecida al anterior, convierte la página en editable completamente.
Al activar la función espera a que el cursor del ratón adopte el icono de una cruz.
Es posible ahora arrastrando el cursor seleccionar texto y eliminarlo o moverlo a otra posición en la misma página.
Usar un Bookmarklet para modificar los elementos de una pagina que no se desean imprimir
Los bloque se muestran delimitados por cuatro cuadrados, significa que se pueden eliminar con solo un clic, para ello usa la tecla Suprimir.
Al finalizar y quedar satisfecho utiliza la herramienta de imprimir propia del navegador que emplees o simplemente usa las teclas Control+P.
En caso de cualquiera equivocación recarga la página usando la tecla F5.
Editar Página. Editar Página.

Los tres métodos anteriores funcionan en todos los navegadores web incluyendo a Internet Explorer.



Crear vínculos, links o botones para imprimir una página web


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 link o vínculo:
<a href="javascript:window.print()"> Imprimir</a>
Se mostrará de la siguiente forma: Imprimir

Código para imprimir página desde un botón:
<input type="button" value="Imprimir" onclick="javascript:window.print()" />
Se mostrará de la siguiente forma:

Código para disponer de la función de imprimir desde una imagen:
<a href="javascript:window.print()"><img src="ruta-imagen" width="" height="" alt="" /></a>
Se mostrará de la siguiente forma: Imprimir



Crear un vinculo, link o botón para imprimir solo una área o sección de una página web


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, para eso es necesario que el texto, imagen, tabla o cualquier elemento este entre las dos etiquetas <div> </div>
El contenedor tiene que tener un id o identificador único en la página, puedes utilizar cualquier nombre, en este ejemplo utilizaremos el nombre "muestra" y será una tabla el objeto, el contenedor quedaría de esta forma: <div id="muestra"> </div>
➔ Incrustar el código con la función de javascript que haga referencia al identificador del contenedor.
➔ Crear un vínculo o link que ejecute el código.
Es posible que los dos últimos elementos estén agrupados



Ejemplos prácticos


Código HTML de la tabla con el contenedor e identificador:


Código de la función javascript:


Código del vinculo:

Quedaría todo de la siguiente forma, da un clic en el botón Imprimir para ver la vista previa.
Tablade ejemplo
datos...datos....
datos...datos...


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.
Como se dijo anteriormente, también tenemos la opción de agrupar el código de la función javascript con el vínculo que lo ejecuta, lo que permite optimizar el contenido, quedaría de la siguiente forma:

El método anterior funciona en todos los navegadores web, excepto en las versiones anteriores a Internet Explorer 10.



Utilizar CSS para especificar las opciones de impresión


Utilizando CCS es posible especificar de qué forma se debe imprimir la página al ejecutar la opción del navegador "Imprimir".
Las más utilizadas son las dos siguientes opciones.

Utilizar CSS para bloquear las secciones de la página que no se deben imprimir


Otro método es definir mediante css cual es el estilo que se debe utilizar al imprimir la pagina.
Para eso es necesario incluir en el código lo siguiente:
<style type="text/css" media="print">
@media print {
#parte1 {display:none;}
#parte2 {display:none;}
}
</style>
Es necesario que en el código HTML de la página estén separadas las secciones correctamente.
En este ejemplo #parte1 {display:none;} establece que no se muestre al imprimir el contenedor (div) con el identificador parte1, y así sucesivamente incluir todos los que sean necesarios excluir de la impresión.
Funciona en todos los navegadores incluyendo Internet Explorer, lamentablemente es imposible incluir en esta página un ejemplo de su uso porque no permitiría que se muestre la vista previa de los ejemplos anteriores.
Este método es utilizado en algunos sitios para impedir que se imprima el contenido, que tontería, son los mismos que en ocasiones con javascript deshabilitan el clic derecho del ratón, pero siempre hay soluciones para burlar cualquier tipo de restricción o de bloqueo: Navegadores web como usar e instalar Bookmarklets.

Establecer un documento externo como el contenido de la impresión


El ultimo método y quizás el óptimo para el usuario, es crear un documento de texto con el formato adecuado, o sea como debe quedar exactamente el contenido de la página impreso y crear en el head de la página un vínculo a su ubicación.
En los navegadores modernos es posible utilizar varios formatos como DOC, TXT, PDF, RFT y otros.
Al utilizar el comando Imprimir será impreso el documento especificado.
Utiliza el siguiente código de muestra para insertarlo en una página web, en este ejemplo se utiliza un documento hecho con Microsoft Word de nombre: version-imprimir.doc.
<link rel="alternate" media="print" href="version-imprimir.doc" />


Páginas relacionadas


Lista de variables y funciones de Javascript
Como escribir con Javascript texto y otros elementos en las páginas web
Como abrir links de una página web en una nueva ventana con Internet Explorer
Como escapar y ocultar texto, código HTML y Javascript en páginas web
Javascript fácil en páginas web, tutorial y ejemplos

¿Necesitas buscar algo en nuestro sitio? ¡Usa a Google!

 
Anterior |  Subir  | Siguiente