NorfiPC

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

Tweet

Todos los navegadores web incluyen la posibilidad de imprimir la página web que representan, esto 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. Vamos a 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, en este caso 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

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. Si te equivocas vuelve a cargar la página y comienza de nuevo, al finalizar y después que quede en la página solo el área que necesites imprimir, da un clic en el vínculo en la esquina superior derecha: 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 parecida al anterior, la diferencia es que en este caso es necesario dar un clic para seleccionar el área que se necesite eliminar, Al mover el ratón por encima de la página espera a que adopte el icono de la cruz, significa que es posible seleccionar un bloque y moverlo o eliminarlo. Se mostrará el área delimitada por cuatro cuadrados significa que esta lista para ser eliminada, utiliza la tecla suprimir y de esa forma sucesivamente ve recortando todas las secciones de la página que sean innecesarias. Al finalizar utilizar la herramienta de imprimir propia del navegador que emplees o simplemente utiliza las teclas Control+P.
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 a la imagen " width="" height="" alt=" " /></a>

Se mostrará de la siguiente forma:

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.

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, clic en el botón Imprimir para ver la vista previa.


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.
Es recomendado para aligerar la carga de la página que la función javascript sea situada al final del código html, justo antes de la etiqueta de cierre del cuerpo </body>.
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:

<input type="button" value="Imprimir Tabla" onclick="javascript:imprSelec('muestra');function imprSelec(muestra) {var ficha=document.getElementById(muestra);var ventimp=window.open(' ','popimpr');ventimp.document.write(ficha.innerHTML);ventimp.document.close();ventimp.print();ventimp.close();};" />
Malas noticias el método anterior no funciona en Internet Explorer, todo lo que implique abrir nuevas ventanas es rechazado por este navegador.

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" />

---

Paginas relacionadas