Imprimir contenido de un div con javascript

Habitualmente las páginas que construimos no sólo contienen la información que deseamos publicar, sino que ésta es acompañada por menús, barras de publicidad, índice de secciones, imágenes…etc. Y además queremos ofrecer a los visitantes la posibilidad de imprimir sólo lo que es contenido. Imagínate una web de cocina en la que quieres ofrecer al visitante la posibilidad de imprimir sólo la receta, sin las barras de navegación, imágenes, etc. El método window.print( ) a secas no nos sirve, porque imprime la página completa si antes no hacemos una selección con el ratón. ¿Podría el Javascript ayudarnos en esta tarea?

La solución para lograr esto necesita que al diseñar la página preveamos que parte de su contenido vamos a ofrecer a nuestros visitantes para imprimir. Esta parte la colocamos en un elemento de bloque HTML con un atributo id, lo más simple es colocarla dentro de un bloque DIV. De esta forma tenemos localizada la parte de la página que queremos que se imprima. Luego usaremos un botón o un enlace para llamar a una función que abra una ventana nueva. En esta ventana se escribe el contenido del objeto correspondiente al bloque DIV, o sea, lo que deba imprimirse. Una vez hecho esto sólo queda llamar al método print de la nueva ventana.

Lo veremos más claro mediante un ejemplo:

Dentro de la etiqueta <body> podríamos tener algo como esto:

<div id="seleccion">Este texto es lo que se imprimirá cuando se pulse el enlace.</div>

Y además, deberemos tener por algún otro lugar el link que imprimirá:

<a href="javascript:imprSelec('seleccion')" >Imprimir texto</a>

Y por último, necesitaremos poner dentro del <head> la siguiente función js:

<script language="Javascript">
	function imprSelec(nombre) {
	  var ficha = document.getElementById(nombre);
	  var ventimp = window.open(' ', 'popimpr');
	  ventimp.document.write( ficha.innerHTML );
	  ventimp.document.close();
	  ventimp.print( );
	  ventimp.close();
	}
	</script>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(18 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

32 respuestas a “Imprimir contenido de un div con javascript”

  1. Manuel Waitoto dice:

    En este momento, tengo el mismo inconveniente que tuvo Oscar Martínez hace unos meses: Estoy realizando un sistema e implemente código qr, lo que quiero es mandar a imprimir la imagen de qr.. Use tu ejemplo agradando el div con su id pero al momento de darle click al botón imprimir me abre la hoja de impresión en blanco, En un comienzo funcionaba normal y de repente dejó de funcionar podrías orientarme por favor te lo agradecería mucho

    • Jose Aguilar dice:

      Hola,

      ¿Habéis probado la opción de guardar en pdf que ofrece la interfaz de imprimir?

      Otra opción que suelo utilizar en proyectos para imprimir es agregar esto en el href de un enlace:

      javascript:window.print();

      Saludos

  2. Miguel dice:

    Hola, es posible hacer esto mismo desde la respuesta de un AJAX??

  3. Oscar martínez dice:

    Hola buen aporte, podria comentarme hay alguna librería que se deba incluir..

  4. Oscar martínez dice:

    Hola estoy realizando un sistema de inventario e implemente codigo qr, lo que quiero es mandar a imprimir la imagen de qr.. Use tu ejemplo agredando el div con su id pero al momento de darle click al boton imprimir me abre la hoja de impresión en blanco, podrías orientarme xfavor te lo agradecería mucho

  5. Hubert Claro dice:

    Hola Jose gracias por compartir.

    Tengo una duda y es que al momento de imprimir pierdo el orden y estilo representado inicialmente.

    Como puedo hacer para mantenerlo o que otra opcion se podria intentar?

    Muchas gracias por tus aportes

  6. aty dice:

    muchas gracias ; justo lo que estaba buscando !

  7. Mariano Scazzino dice:

    Excelente!
    Tenía una modal con un listado para imprimir y esta fue la única solución que funcionó cuando eran varias páginas a imprimir.
    Impecable!
    Gracias!!!!!

  8. Manuel Mar dice:

    Funciona, muchas gracias.

  9. Juan Carlos dice:

    Hola se puede hacer esto para un archivo txt, gracias por el aporte

  10. deivi lazo dice:

    Chevere Causita muy buen aporte se te agradece enormemente…

  11. fredy dice:

    buenas una consulta
    cuando hago ese procedimiento y con una condicional le doy imprimir no sale a la primera y de ahi cambio el objeto de busqueda( lo busco en un combo los datos) y esto cambio para q me visualiza y demora aun mas 2 o 3 hasta 4 veces para q me visualice los datos para imprimir.
    sabe porque pasa esto….
    se le agradeceria mucho

  12. claudio dice:

    muchas gracias por el aporte 🙂

  13. aleli dice:

    Muchas gracias funciona OK

  14. Eduardo dice:

    Podría se que cuando se imprima se tenga el formato el cual se tiene en la pagina o mostrar las imágenes, ya que se muestra en texto plano

  15. lissandra dice:

    Muitas gracias, Muito obrigada!!!!!!!!!!

  16. LEONARDO dice:

    Excelente me sirvió, mucho lo de imprimir.. gracias

  17. URL dice:

    I dont feel Ive scan anything like this before. So excellent to locate somebody with some original thoughts on this topic. thank for starting this up. This site is something that is necessary on the internet, someone with a bit originality. Excellent job for bringing something new towards the internet! 754399

  18. chaussure de foot dice:

    Thanks for sharing superb informations. Your web-site is very cool. I’m impressed by the details that you’ve on this site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found simply the info I already searched everywhere and just couldn’t come across. What an ideal web-site.

  19. chaussure de foot dice:

    Very interesting details you have mentioned , thanks for posting . «Whatever one man is capable of conceiving, other men will be able to achieve.» by Jules Verne.

  20. seriale torrent dice:

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  21. Torrenty dice:

    Heya terrific website! Does running a blog similar to this take a great deal of work? I have very little understanding of programming but I was hoping to start my own blog in the near future. Anyways, if you have any suggestions or techniques for new blog owners please share. I know this is off topic nevertheless I simply needed to ask. Many thanks!

  22. diet plan dice:

    Only a smiling visitant here to share the love (:, btw great style .

  23. Awesome! Its truly amazing article, I have got much clear idea regarding from this article.

  24. casino online dice:

    of course like your web site but you have to test the spelling on quite a few of your posts. Many of them are rife with spelling issues and I to find it very troublesome to tell the truth nevertheless I’ll surely come back again.

  25. Felisa Boatright dice:

    I’d forever want to be update on new articles on this internet site , saved to favorites ! .

  26. Nestor Baransky dice:

    I am always invstigating online for posts that can facilitate me. Thx!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre