¡Buenas!, de todos es sabido la posibilidad de imprimir el contenido de una web, ¿verdad?, pero, hasta hoy, no se me había presentado la necesidad de imprimir SOLO una parte de la web, veamos cómo hacerlo 😉
Bien, por ejemplo, vamos a imprimir sólo un div del contenido de la web, div por poner un ejemplo, puede ser cualquier objeto que nos precise.
<html>
<head>
</head>
<body>
<div id="imprimeme">
<p>EncodingTheCode</p>
</div>
</body>
</html>
En este caso imprimiremos «EncodingTheCode» 😉
Podemos crear un botón para imprimir:
<button onclick="imprimir();"> IMPRIMIR </button>
Ahora la función javascript sería la siguiente:
function imprimir(){
var objeto=document.getElementById('imprimeme'); //obtenemos el objeto a imprimir
var ventana=window.open('','_blank'); //abrimos una ventana vacía nueva
ventana.document.write(objeto.innerHTML); //imprimimos el HTML del objeto en la nueva ventana
ventana.document.close(); //cerramos el documento
ventana.print(); //imprimimos la ventana
ventana.close(); //cerramos la ventana
}
Espero que os haya sido de utilidad 😉
HackSaludos!
Tali
Darkvidhck
EncodingTheCode 
hola que tal lo probe y funciona . lo malo es que si al div le pongo un borde de 1 px solid black
no me imprime ese cuadrito . osea solo imprime letras…
con «ese cuadrito» te refieres al borde?
Solo imprime el contenido del objeto 😉
Saludos!
el innerHTML te devuelve todo lo que este DENTRO de la atiqueta, y no asi los atributos de la propia etiqueta, si quieres hacer eso que dices, tienes que anidar un div con borde dentro del div con id=’imprimeme’, y asi puede que te salga con borde.
Excelente Amigo me fue de mucha ayuda, Gracias por tomarte la molesta de realizar estos ejemplos.
Un Saludo
Hola.
Muchas Gracias por explicar la solución ¡hasta con comentarios para cada línea de código!, es la mejor de las 7 que he leido y la que me ha funcionado bien.
Muchas Gracias, Muchas Gracias, Muchas Gracias…
Voy a probarlo
Hola.. cuando imprimo, la letra es muuuuuy pequeña esta intentando insertar stilo en el codigo de impresion…. pero no se me ocurre como :S
Hola, para poner estilos tienes que hacerlo desde HTML con CSS
Hola buenas , ante todo muy buen aporte. Mi duda es, se podria hacerme llegar por php un email que contenga dicha impresion, algo como que guarde un archivo y lo pueda descargar…
Me estoy quemando la cabeza muchas gracias
Hola, puedes generar un archivo pdf con la librería FPDF de PHP. Con esto puedes enviar un archivo adjunto listo para imprimir. Saludos
Muchas graciad tali
No se me habia ocurrido lo intentare. Saludos
De nada 😉 Saludos!
Hola
gracias por la utilidad.
El problema es que la parte que quiero imprimir es un form con multiples checkbox.
Cuando capturo el objeto no me captura el estado de los checkbox’s y no sé como trasladarlos a la nueva pantalla creada. alguna idea? me está volviendo loco.
Hola Enrique, al ejecutar ‘ventana.document.write(objeto.innerHTML)’ , se escribe el código html de ‘objeto’, ahora, cuando activas/desactivas un checkbox NO cambia el código html del div, por lo que al imprimirlo, sale desactivado.
Lo que se me ocurre ahora mismo es que añadas a tus checkbox la propiedad checked, y cada vez que se interactue con el objeto, llamar a una función javascript que cambie el estado de la propiedad ‘checked’:
function check() {
document.getElementById(«myCheck»).checked = true;
}
function uncheck() {
document.getElementById(«myCheck»).checked = false;
}
Así, a la hora de ‘volcar’ el contenido del div, ‘capturarás’ el estado del checkbox.
Espero que te sirva, no olvides pasarte por nuestro nuevo sitio: http://galisteocantero.com
Gracias por tu respuesta.
No consigo hacer funcionar el formulario. De momento he salido del paso sacando el formulario sin rellenar e imprimir desde alli. No es lo que me habian pedido pero de momento les vale.
el link es:
http://www.calculadoraenteral.com/nutricia2014.asp
(en la pestaña generar documentos)
si se te ocurre algo te lo agradecería-
enrique
Hola.
intento seguir tu consejo pero no consigo capturar el estado del checkbox. Sacar el formulario fuera, como he hecho me deja otros problemas que me gustaría resolver.
Me puedes ayudar?
enrique
Hola Enrique, podrías generar una página solo con la información que deseas, en este caso el formulario y ponerle un boton para mandarlo a imprimir con window.print();
Estimado como se puede hacer para imprimir mas de una copia o repetir la funcion para que imprima varias veces
Hola!, para imprimir varias veces ya hay que usar el diálogo de impresión y el que usuario indique cuantas copias quiere. Desconozco si se puede programar el número de copias que se quiere imprimir. Saludos
Buenas tardes, la funcion va de maravilla, habria alguna forma de imprimir un iframe dentro de la etiqueta div? es decir, muestro una tabla de resultados ademas añado con un iframe un grafico, seria posible? me sale el marco del iframe pero no la información del dicho, un saludo
Hola Aitor, creo que el problema no es el iframe sino el gráfico en sí. Si el gráfico se está generando con javascript puede ser que tengas este problema. Prueba poner dentro del iframe una imagen cualquiera en jpg para ver si imprime lo del iframe o no, si lo imprime trata de convertir tu gráfico a jpg por ejemplo y sino lo imprime es problema del iframe, trata de cambiarlo por un div. Si puedes nos comentas como te fue. Saludos
muchasss graciasss 😀 funciono perfecto para lo que necesitaba, saludos 🙂
Hola muchísimas gracias por compartirlo, mira una pregunta, yo estoy realizando un website con Joomla, ya logré que se me imprima la tabla (que es lo que necesito imprimir) solo que quisiera saber si puedo hacer que esa tabla no pierda sus propiedades (tamaño de letras, bordes etc) Los estilos los estoy jalando desde Bootstrap que ya viene con Joomla… sería eso posible?
Hola Mario, todo sería cuestión de hacer algo así como:
ventana.document.write(«») //incluyes los estilos de bootstrap
ventana.document.write(objeto.outerHTML); //imprimimos el HTML del objeto en la nueva ventana
La verdad no estoy seguro si será lo que realmente quieres, pero puedes investigar un poco e ir jugando con eso.
Saludos!
Hola muchas gracias! Lo hice de esa manera y también probé con crear un media print para darle un estilo específico a lo que se va a imprimir y otro a como se ve en el sitio web
Muchísimas gracias!
Muchas gracias, esactamente lo que etsaba buscando, muy amable al brindar sus conocimientos
Excelente, gracias
Te agradesco muchisimo, es lo que andaba buscando. Lo utilice en una Web que estoy desarrollando con base de datos y jalo a la perfección.
Te agradesco mucho.
Muy bueno, como hago si quiero salto de paginas
Hola, se imprimirá lo que se visualice en el elemento html, así que para meter saltos de linea, debes meterlos primero en el html. Saludos!
hola
se puede conseguir que al abrir la nueva ventana arroje el titulo paga guardar
Hola! No entiendo muy bien tu pregunta, a qué te refieres exactamente?
Gracias. Saludos.
Hola buenas tardes implemente el código que das aquí de ejemplo pero al visualizar para imprimir no me muestra el contenido de los campos, estoy haciendo una factura la cual necesito imprimir, para ello estoy utilizando inputs en la cabecera y en el detalle una tabla, pero no me muestra el contenido. Podrías ayudarme dándome alguna directriz por favor. De antemano gracias.
Hola Lidia, cuando dices que usas inputs en la cabecera, a qué te refieres? Podrías ser más específica o subir ejemplo a github? Gracias!
Hola Darkvidhck, el tutorial es excelente, pero si quisiera imprimir desde la etiqueta section y no un div en particular, como sería el código? Saludos
Hola, en la función imprimir obtenemos el objeto que queremos a través de document.getElementById, dale un id a tu section y lo obtienes con esa función. Nada más 🙂
Saludos!
hola como puedo imprimir codigo qr con div es posible? o debo usar otro codigo.
gracias
Hola, con este código no podrás imprimir un QR a menos que lo estés visualizando en pantalla, para generar el propio QR deberás usar alguna librería específica para ello. Busca en google, ha de haber bastantes 🙂
Saludos!
super el codigo, tengo problemas que no me imprime el valor que ingreso en los input de un formulario, estoy ponchado
Hola Leonardo, para imprimir el valor de un input de un form debes acceder por su id y desde ese elemento, a la propiedad value del input con javascript. Saludos
hola mira yo tengo el mismo problema estoy varado en un proyecto y necesito imprimir una ficha. me imprime correcto pero no me imprime el contenido de los input…. y lo necesito a mas tardar el viernes. tu podrías subir algún código para que nos oriente un poco… gracias
Hola Juan, probablemente no podré subir un ejemplo para ello hasta esa fecha. Ojala puedas encontrar una alternativa usando algún contenedor (span por ejemplo) oculto, al que puedas setear el valor del input, activarlo y ocultar el input cuando pulses sobre imprimir. Es lo primero que se me viene a la cabeza a bote pronto. Espero te sirva.
Hola tengo un problema, estoy creando una tabla con bordes mediante botstrap, esta esta dentro de de un div que es el que imprimo, hasta ahí todo bien solo que al momento de imprimir no se visualizan los bordes y los estilos de la tabla solo se ven los datos en columnas y filas
Hola Diego, debería verse tal y como se ve en pantalla, ¿hay algún sitio donde podamos acceder y ver el código? Gracias!