usuario2931470
He usado la etiqueta para incrustar un archivo pdf.
<iframe id="iframepdf" src="https://stackoverflow.com/questions/19654577/files/example.pdf"></iframe>
Esto funciona bien en Chrome, IE8+, Firefox, etc., pero por alguna razón, cuando algunas personas lo ven en IE8, los archivos se descargan en lugar de incrustarse. Sé que este navegador está desactualizado, pero es el navegador estándar dentro de mi oficina y, como tal, el sitio web debe diseñarse para esto.
¿Alguien tiene alguna idea de por qué sucede esto, cómo puedo solucionarlo o poner un mensaje de error en lugar de dejar que se descarguen los archivos?
Adriano Repetti
esta descargado probablemente porque no hay instalado el complemento Adobe Reader. En este caso, IE (no importa qué versión) no sabe cómo renderizarlo y simplemente descargará el archivo (Chrome, por ejemplo, tiene su propio renderizador de PDF incrustado).
Si quieres intentar para detectar soporte de PDF podría:
!!navigator.mimeTypes["application/pdf"]?.enabledPlugin(ahora en desuso, posiblemente compatible solo con algunos navegadores).navigator.pdfViewerEnabled(estándar en vivo, podría cambiar y actualmente no es ampliamente compatible).
2021: hoy en día la respuesta original definitivamente está desactualizada. A menos que necesite admitir navegadores relativamente antiguos, simplemente debe usar <object> (eventualmente con un respaldo) y déjalo así.
Dicho eso. <iframe> no es la mejor manera de mostrar un PDF (no olvide la compatibilidad con los navegadores móviles, por ejemplo, Safari). Algunos navegadores siempre abrirán ese archivo dentro de una aplicación externa (o en otra ventana del navegador). La mejor y más compatible forma que encontré es un poco complicada pero funciona en todos los navegadores que probé (incluso bastante desactualizados):
Mantenga su iframe> pero no muestre un PDF en su interior, se llenará con una página HTML que consta de un <object> etiqueta. Cree una página de envoltura HTML para su PDF, debería verse como este:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<div>No online PDF viewer installed</div>
</object>
</body>
</html>
Por supuesto, aún necesita el complemento apropiado instalado en el navegador. Además, mire esta publicación si necesita admitir Safari en dispositivos móviles.
¿Por qué una página HTML? Por lo tanto, puede proporcionar una alternativa si el visor de PDF no es compatible. Visor interno, mensajes/opciones de error HTML sin formato, etc.
Es complicado verificar la compatibilidad con PDF para que pueda proporcionar un visor alternativo para sus clientes, eche un vistazo a PDF.JS proyecto; es bastante bueno, pero la calidad de representación (para navegadores de escritorio) no es tan buena como la de un nativo Procesador de PDF (supongo que no vi ninguna diferencia en los navegadores móviles debido al tamaño de la pantalla).
-
¿Hay alguna forma de mostrar solo el iframe si está instalado el complemento Adobe Reader y mostrar un mensaje de error si no lo está?
– usuario2931470
29 de octubre de 2013 a las 10:04
-
Esto ahora está funcionando, pero ¿el archivo está muy ampliado? Estaba usando iframe ya que esto permitía que el pdf se ajustara al ancho del div.
– usuario2931470
29/10/2013 a las 10:10
-
Para cualquiera que tenga dificultades para obtener un comportamiento consistente en los navegadores móviles, vea aquí, esto me ayudó: stackoverflow.com/questions/7437602/…
– QFDev
12/01/2015 a las 15:30
-
¿Por qué un
<object>dentro un<iframe>? ¿Por qué no solo un objeto?– Drazen Bjelovuk
10 dic 2021 a las 22:09
-
@DrazenBjelovuk, este es un hilo bastante antiguo, a menos que necesite admitir versiones muy antiguas de Safari y / o proporcionar un renderizador alternativo (no, definitivamente no usaría Google Docs como respaldo), entonces usted probablemente ya no necesita la página HTML. Podría ser un poco PITA para probar, pero hoy en día simplemente
<object>debería hacer.– Adriano Repetti
12 de diciembre de 2021 a las 11:33
Si el navegador tiene un complemento de pdf instalado, ejecuta el objeto; si no, usa el visor de PDF de Google para mostrarlo como HTML simple:
<object data="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
-
Este funcionaría de maravilla, pero tengo un montón de
No Preview Availableusando documentos– mdmb
5 de marzo de 2018 a las 10:35
-
@Ancinek, ¿reemplazó los dos?
your_url_to_pdfen mgutt (el de los datos del objeto y el degoogle.com/viewer?– MagTún
2 de julio de 2018 a las 10:29
-
Utilicé la barra de desplazamiento del código anterior que no se muestra en los dispositivos Ipad
.scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }– usuario264675
20 de noviembre de 2019 a las 20:28
-
Parece que el visor de Google elimina cualquier marcador interno dentro del documento.
– Bangkokian
7 de junio de 2020 a las 16:11
marco flotante
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="https://stackoverflow.com/questions/19654577/PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Objeto
<object data="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf">
<embed src="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf" />
</object>
-
Ahora, ¿cómo activar la impresión en ese objeto, la impresión no está definida?
– miguel
14 de diciembre de 2016 a las 12:43
-
La solución iFrame aquí es justo lo que necesitaba para mostrar un PDF generado por un servicio de back-end de MS MVC y devuelto como una vista. Probé todas las otras soluciones y por alguna razón ninguna funcionó.
– Terry H.
7 dic 2018 a las 19:44
-
Esta es la única solución que podría hacer funcionar sin que Firefox me solicite descargar el documento. ¡Muchas gracias por esto!
– Disquete no encontrado
28 de marzo de 2022 a las 11:45
-
El objeto aún mostrará el pdf como una imagen. Si su pdf tiene varias páginas, solo verá la primera página.
– Enrique
31 de agosto de 2022 a las 10:27
Probar esto.
<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>
Ganesan J.
En mi caso configuré el enlace directamente y funciona bien.
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<h1>Online HTML Editor</h1>
<div>This is real time online HTML Editor</div>
<iframe id="if1" width="100%" height="900" style="visibility:visible" src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</body>
</html>
Nota: El código anterior que funciona en el archivo html no funciona en esta pila que se muestra en este fragmento
-
la pregunta era cómo mostrar que IE8 no puede mostrar PDF a menos que se haya instalado Acrobat u otra solución alternativa. Su respuesta no aborda cómo mostrar un mensaje de error.
– KJ
9 mar a las 18:00
-
Oh, lo siento señor. No vi bien la pregunta. Respondí para mostrar pdf solo en Chrome y otros navegadores
– Ganesan J.
hace 2 días
-
Para ser justos, el encabezado de la pregunta no aclaró que claramente era cómo mostrar un mensaje de error cuando un navegador como Chrome está configurado o NO puede habilitarse para pdf como los navegadores móviles con poca potencia donde un PDF enmarcado incrustado simplemente estará en blanco. Era una pregunta inapropiada mal enmarcada.
– KJ
hace 2 días
Ayo D Adesanya
Utilice la API de Adobe Embed PDF. Esta es la solución que utilicé al final, funciona perfectamente.
-
la pregunta era cómo mostrar que IE8 no puede mostrar PDF a menos que se haya instalado Acrobat u otra solución alternativa. Su respuesta no aborda cómo mostrar un mensaje de error.
– KJ
9 mar a las 18:00
-
Oh, lo siento señor. No vi bien la pregunta. Respondí para mostrar pdf solo en Chrome y otros navegadores
– Ganesan J.
hace 2 días
-
Para ser justos, el encabezado de la pregunta no aclaró que claramente era cómo mostrar un mensaje de error cuando un navegador como Chrome está configurado o NO puede habilitarse para pdf como los navegadores móviles con poca potencia donde un PDF enmarcado incrustado simplemente estará en blanco. Era una pregunta inapropiada mal enmarcada.
– KJ
hace 2 días
Probablemente mire también esto tutorial o pregunta
– Flimtix
4 de abril de 2022 a las 12:32
Voto para cerrar esta pregunta porque se trataba de una aplicación antigua que no tenía esa capacidad, por lo que estaba fuera de tema en ese momento y está atrayendo respuestas tontas, esto funciona para mí hoy.
– KJ
9 de marzo a las 17:44