javascript - visualizador - ¿Cómo abrir un archivo PDF en un<iframe>?

visualizador de pdf html5

Question

Quiero abrir el archivo pdf en un iframe. Estoy usando el siguiente código:

<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
   jQuery1640737952376988841="85"> User guide </a>

Se está abriendo bien en Firefox, pero no se está abriendo en IE8.

¿Alguien sabe cómo hacer que funcione también para IE?

Answer 1

Este es el código para vincular un PDF accesible de HTTP (S) desde un <iframe> :

<iframe src="https://research.google.com/pubs/archive/44678.pdf"
   width="800px" height="600px" >

Fiddle: http://jsfiddle.net/cEuZ3/1545/

EDITAR: y puede usar Javascript, desde la etiqueta <a> (evento onclick ) para establecer el atributo SRC de iFrame en el tiempo de ejecución ...

EDIT 2: Aparentemente, es un error (pero hay soluciones):

Los archivos PDF no se abren en Internet Explorer con Adobe Reader 10.0: los usuarios obtienen una pantalla gris vacía. ¿Cómo puedo solucionar esto para mis usuarios?

Answer 2

Hazlo asi:

<iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>

Recuerde cerrar la etiqueta iframe.

Answer 3

También es importante asegurarse de que el servidor web envíe el archivo con Content-Disposition = inline. este podría no ser el caso si está leyendo el archivo usted mismo y envía su contenido al navegador:

en php se verá así ...

...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...

readfile(''localfilepath.pdf'')

Answer 4

Usar un iframe para "renderizar" un PDF no funcionará en todos los navegadores; depende de cómo maneja el navegador los archivos PDF. Algunos navegadores (como Firefox y Chrome) tienen un PDF incorporado que les permite mostrar el PDF en línea, como lo hacen algunos navegadores antiguos (tal vez versiones anteriores de IE intentan descargar el archivo en su lugar).

En su lugar, recomiendo consultar PDFObject que es una biblioteca de Javascript para incrustar archivos PDF en archivos HTML. Maneja la compatibilidad del navegador bastante bien y probablemente funcione en IE8.

En su HTML, puede configurar un div para mostrar los PDF:

<div id="pdfRenderer"></div>

Luego, puede tener un código Javascript para incrustar un PDF en ese div :

var pdf = new PDFObject({
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");