Imprimir áreas determinadas con Javascript

¡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!

Anuncios

Acerca de Darkvidhck

Estudiante de ingeniería informática, haciendo mis pinitos como desarrollador web, programador, gamer y Linuxero. Aficionado a la seguridad. Eterno viciado al conocimiento.
Esta entrada fue publicada en Diseño y desarrollo WEB y etiquetada , , , , . Guarda el enlace permanente.

44 respuestas a Imprimir áreas determinadas con Javascript

  1. carlos Andres dijo:

    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…

  2. monola26 dijo:

    Excelente Amigo me fue de mucha ayuda, Gracias por tomarte la molesta de realizar estos ejemplos.
    Un Saludo

  3. Mario dijo:

    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…

  4. gnviktor dijo:

    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

  5. Nacho dijo:

    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

  6. enrique dijo:

    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.

    • Darkvidhck dijo:

      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

      • enrique dijo:

        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

      • enrique dijo:

        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

      • Tali dijo:

        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();

  7. Agustij dijo:

    Estimado como se puede hacer para imprimir mas de una copia o repetir la funcion para que imprima varias veces

    • Tali dijo:

      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

  8. Aitor Rodriguez dijo:

    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

    • Tali dijo:

      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

  9. muchasss graciasss 😀 funciono perfecto para lo que necesitaba, saludos 🙂

  10. Mario dijo:

    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?

    • Darkvidhck dijo:

      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!

      • Mario dijo:

        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!

  11. Hugo Cano dijo:

    Muchas gracias, esactamente lo que etsaba buscando, muy amable al brindar sus conocimientos

  12. Oscar Xenon dijo:

    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.

  13. Julio dijo:

    Muy bueno, como hago si quiero salto de paginas

  14. hola
    se puede conseguir que al abrir la nueva ventana arroje el titulo paga guardar

  15. Lidia dijo:

    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.

  16. Blin dijo:

    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

  17. Evelin dijo:

    hola como puedo imprimir codigo qr con div es posible? o debo usar otro codigo.
    gracias

    • Darkvidhck dijo:

      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!

  18. leonardo dijo:

    super el codigo, tengo problemas que no me imprime el valor que ingreso en los input de un formulario, estoy ponchado

    • Tali dijo:

      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

      • Juan Gonzalez dijo:

        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

      • Tali dijo:

        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.

  19. Diego dijo:

    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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s