Manual: imprimir un pdf desde javascript en Chrome,Firefox y Explorer

post details top
Jan 11th, 2013
post details top

Estreno blog con un manual para imprimir un pdf desde javascript que funciona en todas las versiones de Google Chrome, Explorer y FireFox.

Configuración para Chrome
google-chrome-logo-wallpaper

Este es el más sencillo de todos, te quiero Google Chrome :3…. bueno empecemos
El siguiente código deberá ir entre las etiquetas <head> y </head>.

Actualizado el 13-06-2014 , desde la versión 30 chrome no lee bien los ids de los iframes.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function() {
   $(".pdf-print").live("click",function () {
      var name = "visualizador-pdf";
window.frames[name].focus();
window.frames[name].print();
return false;
});
});
// ]]></script>

Explicación del código

Uso .live en todas las funciones pero para que sea más cómodo y se pueda implementar este código de manera dinámica. En todos los exploradores se deberá de hacer primero .focus, esto hace que el explorador centre el foco en ese elemento y después .print() que ejecuta la impresión.

El siguiente código deberá ir entre las etiquetas <body> y </body>.

<iframe id="visualizador-pdf" name="visualizador-pdf" src="example.pdf" height="400" width="521"></iframe>
 <a class="pdf-print" id="wp-submit"></a>Imprimir

Para visualizar el pdf tienes que hacerlo con un iframe, de otras formas no me ha funcionado en Google Chrome.


Configuración para Explorer

internet-explorer

Es casi lo mismo pero al Explorer cómo es más cortito tienes que decir-le tres cosas en vez de una xd.
El siguiente código deberá ir entre las etiquetas <head> y </head>.

<script type="text/javascript">// <![CDATA[
function printIt(){
  var pdf = document.getElementById("samplePDF");
  pdf.click();
  pdf.setActive();
  pdf.focus();
  pdf.print(); }
// ]]></script>

Explicación del código

click() hace click sobre el elemento que haya puesto y setActive() que activa el elemento pero sin hacer focus en él, las demas funciones hacen la misma función que en Google Chrome.

El siguiente código deberá ir entre las etiquetas <body> y </body>.

<object id="samplePDF" width="100%" height="100%" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="example.pdf" /><embed id="samplePDF" width="100%" height="100%" type="application/x-shockwave-flash" src="example.pdf" /></object>
<a onclick="printIt('samplePDF')">
<strong class="highlight">Print</strong></a>

Después para visualizar el pdf tienes que hacerlo con un embed o object, con iframe no funciona el evento .print().

Configuración para Firefox

Firefox-logo

Es el más complejo, no sé si será la manera más correcta pero es la única que me ha funcionado.
El siguiente código deberá ir entre las etiquetas <head> y </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$(".pdf-print").live("click",function () {
  var ruta = $('#print-iframe').attr('src');
$("#print-iframe").remove();
  var domain = "http://www.magictree.es/";
  var domain_lenght = domain.length;
  var ruta = ruta.substring(domain_lenght,ruta.length);
  var iframe = '<iframe id="print-iframe" width="521" height="400" type="application/pdf" src="'+domain+ruta+'" name="print-iframe"></iframe>';
  $("#print-iframe-div").append(iframe);
  window.frames["print-iframe"].focus();
  window.frames["print-iframe"].print();
});
});
// ]]></script>

Explicación del código

Primero cojo la ruta del iframe, después lo elimino y lo vuelvo a crear porque en FireFox no he conseguido hacer el foco en un elemento existente, a través de javascript.
Otra cosa a comentar.. en firefox, también he tenido que seleccionar la url nativa y crear la url real, con aaaa porque sino tampoco me cargaba bien la url, aquí la he dejado cómo variable pero por otro bug de este servidor, bugs everywhereee !.

El siguiente código deberá ir entre las etiquetas <body> y </body>.

<iframe id="print-iframe" name="print-iframe" src="example.pdf" height="240" width="320"></iframe>

<a class="print" href="#"> Print</a>

La visualización del pdf tiene que ser con un iframe, de otras formas no me ha funcionado enFireFox.
Demo online
Descargar archivos
Biografía

2 Comments

  • alex

    Que grande !! me ha ayudado mucho esto y me gusta la estética del blog :D

  • Tabutnas

    Hola, si efectivamente en FireFox no va, ahora mismo sólo me funciona en chrome y explorer… en FireFox dejo de ir y no sé porqué :/, pero próximamente me pondré a averiguar porqué no funciona :D , gracias por avisar !! saludos

Leave a Commentpost details top

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Buscador

Ofertas magictree