You are on page 1of 8

Buscar en este sitio

NorfiPC
norfiPC
ideas, consejos, soluciones prcticas....Para el Uso de tu PC y la Navegacion en Internet
Inicio
Internet
Facebook
Como lo Hago
Celulares
Modificar Windows
Descargas
Diseo Web
Sobre nosotros
Mapa del Sitio
NorfiPC Informaciones de Windows Imprimir rea de una pgina web
Como imprimir solo un rea, parte o seccin de una
pgina web
+11 Recomendar esto en Google
Twittear 7

Herramientas que hacen posible eliminar de la pgina los elementos innecesarios e imprimir el que nos interesa.
Bookmarklets para imprimir solo lo necesario. Cdigos de JavaScript para crear vnculos o botones En las pginas
que permitan al lector la impresin de una seleccin o solo un bloque especfico.
Todos los navegadores web incluyen la posibilidad de imprimir la
pgina web que representan, funciona utilizando la funcin de javascript window.print(), pero la desventaja es que no
existen opciones para que el usuario pueda imprimir solo lo que necesite.
Cualquier pgina tiene una multitud de elementos que no forman parte de su contenido y que la mayor parte de las
ocasiones no nos interesa.
Me gusta Enviar
A 33 personas les gusta
esto. S el primero de tus
amigos.
Algunas pginas son diseadas proporcionando al usuario la opcin 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 mtodos que nos permiten lograr imprimir solo lo que verdaderamente necesitemos.
Podemos dividirlos en dos grandes grupos, los mtodos a utilizar los usuarios directamente desde el navegador web y
los que pueden emplear los desarrolladores o cualquiera que tenga acceso al cdigo fuente o HTML de estas y por lo
tanto puedan modificarlo a su antojo.
No es nada difcil, no es necesario poseer conocimientos avanzados de diseo web ni de javascript, solo es necesario
copiar y pegar.
Empezaremos de lo ms sencillo y elemental a lo ms difcil
Mtodos o formas de imprimir una pgina web
Usar un Bookmarklet para imprimir una pgina web
Es la herramienta elemental, solo arrstralo a la barra de marcadores del navegador para utilizarlo desde all, dando un
clic e imprimir la pgina, no existen opciones ni configuraciones para su uso: Imprimir
Bookmarklet para recortar una pgina 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 pgina 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 pgina, 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 tambin una pequea barra de herramientas de color rojo con tres opciones:
Imprimir. Manda a imprimir la pagina
Quitar. Deshabilita temporalmente la funcin
Atrs. Deshacer la accin anterior.
Para comenzar desde el principio solo vuelve a cargar la pgina.
Try the Kony Cloud Free
Kony.com
Integrated app design, dev, & mgmt. Get started today!
Puedes utilizarlo offline, es decir sin conexin para imprimir pginas que se encuentren guardadas en el equipo, en
ningn momento se afectara ni modificara el cdigo original de la pgina en la que se hagan los recortes: Recortar.
Bookmarklet para editar pgina web
Bookmarklet que funciona de forma algo parecida al anterior, convierte la pgina en editable completamente.
Al activar la funcin espera a que el cursor del ratn adopte el icono de una cruz.
Es posible ahora arrastrando el cursor seleccionar texto y eliminarlo o moverlo a otra posicin en la misma pgina.
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 equivocacin recarga la pgina usando la tecla F5.
Editar Pgina. Editar Pgina.
Los tres mtodos anteriores funcionan en todos los navegadores web incluyendo a Internet Explorer.
Esta pgina es segura
Endpoint Security by Bitdef ender

Crear vnculos, links o botones para imprimir una pgina web
Funciones bsicas y elementales para imprimir una pgina
Cdigos para insertar en el cdigo fuente de la pgina, para crear un vnculo, link o botn que posibilite y facilite al
usuario imprimir la pgina y que no tenga que utilizar las opciones de su navegador web o de terceros.
Cdigo para imprimir pgina desde un link o vnculo:
<a href="javascript:window.print()"> Imprimir</a>
Se mostrar de la siguiente forma: Imprimir
Cdigo para imprimir pgina desde un botn:
<input type="button" value="Imprimir" onclick="javascript:window.print()" />
Se mostrar de la siguiente forma: Imprimir
Cdigo para disponer de la funcin de imprimir desde una imagen:
<a href="javascript:window.print()"><img src="ruta-imagen" width="" height="" alt="" /></a>
Se mostrar de la siguiente forma:

Crear un vinculo, link o botn para imprimir solo una rea o seccin de una pgina web
Para imprimir solo un rea o seccin de una pgina web, son necesarios tres requisitos:
Que el rea o seccin 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 pgina, puedes utilizar cualquier nombre, en este ejemplo
utilizaremos el nombre "muestra" y ser una tabla el objeto, el contenedor quedara de esta forma: <div
id="muestra"> </div>
Incrustar el cdigo con la funcin de javascript que haga referencia al identificador del contenedor.
Crear un vnculo o link que ejecute el cdigo.
Es posible que los dos ltimos elementos estn agrupados
Ejemplos prcticos
Cdigo HTML de la tabla con el contenedor e identificador:
<div id="muestra">
<table class="tabla">
<tr><th>Tabla</th><th>de ejemplo</th></tr>
<tr><td>datos...</td><td>datos....</td></tr>
<tr><td>datos...</td><td>datos...</td></tr>
</table>
</div>
Cdigo de la funcin javascript:
<script type="text/javascript">
function imprSelec(muestra)
{var ficha=document.getElementById(muestra);var ventimp=window.open('
','popimpr');ventimp.document.write(ficha.innerHTML);ventimp.document.close();vent
imp.print();ventimp.close();}
</script>
Cdigo del vinculo:
<a href="javascript:imprSelec('muestra')">Imprimir Tabla</a>
Quedara todo de la siguiente forma, da un clic en el botn Imprimir para ver la vista previa.
Tabla de ejemplo
datos... datos....
datos... datos...
Imprimir Tabla
Es posible en una misma pgina web encerrar diferentes secciones en distintos contenedores o DIV con diferentes
identificadores cada uno, en ese caso seran necesarios igual cantidad de funciones de javascript en las que cambiara
solo el nombre que referencia al identificador.
Como se dijo anteriormente, tambin tenemos la opcin de agrupar el cdigo de la funcin javascript con el vnculo que
lo ejecuta, lo que permite optimizar el contenido, quedara 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();vent
imp.print();ventimp.close();};" />
El mtodo anterior funciona en todos los navegadores web, excepto en las versiones anteriores a Internet Explorer 10.
Utilizar CSS para especificar las opciones de impresin
Utilizando CCS es posible especificar de qu forma se debe imprimir la pgina al ejecutar la opcin del navegador
"Imprimir".
Las ms utilizadas son las dos siguientes opciones.
Utilizar CSS para bloquear las secciones de la pgina que no se deben imprimir
Otro mtodo es definir mediante css cual es el estilo que se debe utilizar al imprimir la pagina.
Para eso es necesario incluir en el cdigo lo siguiente:
<style type="text/css" media="print">
@media print {
#parte1 {display:none;}
#parte2 {display:none;}
}
</style>
Es necesario que en el cdigo HTML de la pgina estn 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 impresin.
Funciona en todos los navegadores incluyendo Internet Explorer, lamentablemente es imposible incluir en esta pgina un
ejemplo de su uso porque no permitira que se muestre la vista previa de los ejemplos anteriores.
Este mtodo es utilizado en algunos sitios para impedir que se imprima el contenido, que tontera, son los mismos que
en ocasiones con javascript deshabilitan el clic derecho del ratn, pero siempre hay soluciones para burlar cualquier tipo
de restriccin o de bloqueo: Navegadores web como usar e instalar Bookmarklets.
Establecer un documento externo como el contenido de la impresin
El ultimo mtodo y quizs 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 pgina impreso y crear en el head de la pgina un vnculo a su
ubicacin.
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 cdigo de muestra para insertarlo en una pgina 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" />
Hazte fan de nuestra pgina en Facebook, para recibir informacin tcnica actualizada y
trucos para el uso de la computadora, el celular e internet
Recibe en Twitter a diario, sugerencias sobre contenido til e interesante, solo sguenos.
Trucos de NorfiPC
Me gusta 4403
Seguir a @NorfiPC 3,672 seguidores
Sguenos en Google+
Seguir
866
Pginas relacionadas
Lista de variables y funciones de Javascript
Como escribir con Javascript texto y otros elementos en las pginas web
Como abrir links de una pgina web en una nueva ventana con Internet Explorer
Como escapar y ocultar texto, cdigo HTML y Javascript en pginas web
Javascript fcil en pginas web, tutorial y ejemplos
Necesitas buscar algo en nuestro sitio? Usa a Google!
Buscar

Articulos
Inicio
Navegar en internet
De todo para Facebook
Como lo hago. Artculos varios
Celulares
Modificar Windows
Descargas gratis
Herramientas para virus
Comandos y batch para Windows
Modificar el Registro
Herramientas para la red
Diseo web fcil
Informaciones de Windows
Infografas
Redes sociales
Recuperar
Pginas y aplicaciones HTA
Anuncios Google Crear web Paginas web Pgina web Diseno web
Buscar

Anterior | Subir | Siguiente
NorfiPC Copyright (C) 2013 Norfi Carrodeguas Google+ HTML5
Anuncios Google
Como crear paginas web
Javascript tutorial
Javascript print

You might also like