ASP.NET – Imprimir pagina aspx
ASP.NET – Imprimir pagina aspx en varias hojas
y un amigo me comentó que a pesar de que las recomendaciones dadas en los posts anteriores eran buenos, habían ocasiones en las que quería previsualizar cómo saldría la impresión (sin tener que depender del botón PREVIEW del browser).
Entonces, lo que vamos a hacer hoy es cómo haríamos para imprimir una página (aspx, html, php, jsp, etc) o sólo una sección de esa página… obviamente antes mostraremos el contenido a imprimir en un popup, que nos servirá como el PREVIEW ;)
Este es el código que hará todo el trabajo, cópienlo y péguenlo en alguna página aspx vacía:
<html> <head> <title>Friendly Print</title> <style type="text/css"> body { font-family: Trebuchet MS; } </style> <script type="text/javascript"> function PrintThisDiv(id) { var HTMLContent = document.getElementById(id); var Popup = window.open('about:blank', id, 'width=500,height=500'); Popup.document.writeln('<html><head>'); Popup.document.writeln('<style type="text/css">'); Popup.document.writeln('body{font-family: Trebuchet MS;}'); Popup.document.writeln('.no-print{display: none;}'); Popup.document.writeln('</style>'); Popup.document.writeln('</head><body>'); Popup.document.writeln('<a href="javascript:;" onclick="window.print();">Imprimir</a>'); Popup.document.writeln(HTMLContent.innerHTML); Popup.document.writeln('</body></html>'); Popup.document.close(); Popup.focus(); } </script> </head> <body> <form id="form1" runat="server"> <div style="font-weight: bold; background-color: green"> <img src="images/excel.png" /> Esta es la cabecera de página </div> <div id="MainDiv" style="text-align: center"> <a class="no-print" href="javascript:;" onclick="PrintThisDiv('MainDiv')">Previsualizar impresión de página</a> <div id="print1" style="background-color: #ACFA58"> <a class="no-print" href="javascript:;" onclick="PrintThisDiv('print1')" style="float: right"> Previsualizar impresión</a> <h3> Sección a imprimir</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.... </div> <div id="print2" style="background-color: #AEB404"> <a class="no-print" href="javascript:;" onclick="PrintThisDiv('print2')" style="float: right"> Previsualizar impresión</a> <h3> Otra sección a imprimir</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged... </div> </div> <div style="background-color: #04B4AE;"> <h3> Este es el pie de página</h3> </div> </form> </body> </html>
Ahora ejecuten la página y verán algo como esta imagen:
Como pueden observar, hay tres enlaces: uno que permite Prevualizar la impresión de todo el contenido de la página, y otros dos enlaces que nos permiten previsualizar sólo una sección de página…
hagan click en los enlaces y verán que aparece un popup diferente por cada caso, acabo de presionar el último enlace y vean lo que apareció:
Este popup ya está limpio y listo para imprimir.
Esta solución ha sido implementada utilizando javascript, el código lo pueden chequear arriba: hay una función llamada function PrintThisDiv(id) que, como ven recibe como parámetro el id del control que se va a imprimir y luego copia todo el html de ese control... para luego mostrarlo en un popup...
Espero que les sea de utilidad ;)
13 comentarios:
Un enfoque muy práctico. Gracias!
Hola Anakin,
Gracias por tu comentario ;)
También serviría si quiero imprimir logos, input text, textAreas y demás???
hola Doctrine Dark,
seguro que sí... si quieres que se incluyan logos o controles simplemente no les apliques estilos css para ocultarlos (osea no les pongas display: none)
te recomiendo este enlace http://bit.ly/9u7SK3
Si aún tienes dudas, explícanos con más detalles lo que deseas.
Saludos cordiales
tengo un mschart en la pagina y al tratar de previsualizar me muestra todos los elementos de la pagina a excepcion del mschart(grafico)
hola scarsx,
si pudieras enviarme la pagina de tu proyecto con un grafico de muestra, para simplemente tratar de corregirlo...
envíalo a:
sserrano at jabs dot com dot pe
Saludos
Hola Segundo,
me sirvió de mucho tu publicacion.
como puedo enviar un dato desde un textbox a aluna parte de la seccion a imprimir? se necesita php? o hay alguna forma de hacerlo mas sencillo?
de todas maneras si tienes a mano el codigo lo puedes publicar?
Hola israel,
puedes usar javascript para ello.
si por ejemplo tienes un label donde quieres mostrar el valor del textbox harías así como el ejemplo que he pegado en esta url:
http://pastebin.com/HsZhhRHb
Lo mismo aplica para controles ASP.NET.
Saludos
Super, Gracias Segundo. Realmente pense que no ibas a responder, y realmente necesitaba hacer eso.
Eso era exactamente lo que necesitaba.
Israel.
hola, tengo el siguiente problema, deseo que al previsualizar en un pop up un div de la pagina, como es el ejemplo de aca, pueda imprimir sin que me aparezca el link o boton de impresión, he intentado con un javascript dentro pero al parecer no me ha funcionado o hay que ponerlo de alguna forma que desconozco, ojala puedan ayudarme. saludos
hola Pandrix,
pon este código en tu página antes de cerrar el body
[script type="text/javascript"]
this.print(true);
[/script]
reemplaza los corchetes por su correspondientes < y >
Saludos
Gracias master...
es el ejemplo perfecto!
estuve buscando y este fue el que me sirvió, muchas gracias por la aportación :D
Publicar un comentario