¿Forma recomendada para incrustar PDF en HTML?


1182

¿Cuál es la forma recomendada de incrustar PDF en HTML?

  • iFrame?
  • ¿Objeto?
  • ¿Empotrar?

¿Qué dice Adobe al respecto?

En mi caso, el PDF se genera sobre la marcha, por lo que no se puede cargar a una solución de terceros antes de vaciarlo.


66

Hay una gran comparación no solo de soluciones específicas sino de estrategias generales, en la wiki del repositorio pdf2htmlEX . También, aunque no lo he probado, este parece ser un tenedor mantenido.
ShreevatsaR

Respuestas:


540

Probablemente el mejor enfoque es usar la biblioteca PDF.JS. Es un procesador puro de HTML5 / JavaScript para documentos PDF sin complementos de terceros.

Demostración en línea: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js


12
Como se señaló en otra respuesta, scribd realmente usa pdf2swf para convertir archivos pdf
Peter Craig el

8
Recomiendo encarecidamente no usar scribd: acabo de realizar un experimento en un documento en particular y en firefox 4 solo muestra las primeras 3 páginas, mientras que en IE9 su texto de representación es incorrecto, compensa algunas secciones de la página. Técnicamente hablando, tiene errores. ¡Además, esperan que se suscriba para imprimir o descargar documentos! Esencialmente están tomando documentos previamente gratuitos y erigiendo un muro de pago a su alrededor.
frankster

99
La biblioteca PDF.js en realidad parece una muy buena solución, aunque la demostración vinculada no muestra incrustada en una página (ocupa toda la página). Pero utiliza el lienzo HMTL5, por lo que debería ser fácil de insertar y es rápido . En el lado negativo , toma algunos js para usar, a diferencia de <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
LarsH

33
pdf.js funciona mal en navegadores de tabletas como Chrome. También encuentro que es muy, muy lento para documentos PDF más grandes.
Rocco The Taco

10
No puedo creer que esto se recomiende. Mire la representación de la fuente en la demostración en línea, se ven irregulares y horribles. Se ve mucho mejor con la representación de subpíxeles cuando se abre en Adobe Reader.
Speedplane

532

Esto es rápido, fácil, directo y no requiere ningún script de terceros:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

ACTUALIZACIÓN (1/2018):

El navegador Chrome en Android ya no admite incrustaciones de PDF. Puede solucionar esto utilizando el visor de PDF de Google Drive

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

30
Es mejor usar una etiqueta <object> para que pueda incluir una reserva.
Jonathon Hill

1
Pensé que los desarrolladores querrían saber que Mac / Firefox obtiene una imagen de complemento rota. La página del complemento no cargará el complemento que está buscando. ¿Alguna idea de cómo solucionar esto?
Shanimal

63
si desea asegurarse de que se mostrará en lugar de descargar automáticamente el pdf (como me ocurrió), agréguelo type='application/pdf'a la etiqueta de
inserción

32
Es mejor usar la <object>etiqueta porque puede mostrar contenido alternativo en navegadores que no pueden mostrar archivos PDF. Incluso puede poner una <embed>etiqueta en una <object>etiqueta si lo desea. Ref: stackoverflow.com/questions/1244788/embed-vs-object
Raphael

1
@raphaelcm En realidad, como dije antes, solo usar la etiqueta de inserción funciona en todos los principales navegadores. Incluso IE 7 y 8.
Batfan

361

También puede usar el visor de PDF de Google para este propósito. Hasta donde sé, no es una función oficial de Google (¿estoy equivocado en esto?), Pero me funciona muy bien y sin problemas. Necesita cargar su PDF en algún lugar antes y simplemente usar su URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Lo importante es que no necesita un reproductor Flash, usa JavaScript.


29
Una cosa que debe mencionarse es que hay un límite superior para el tamaño del PDF que se puede mostrar. Creo que actualmente son 10 MB / 100 páginas. PD: No creo que el espectador sea "no oficial"; incluso tienen una página de
instrucciones

30
Esta opción funciona muy bien, pero debe hacer que sus archivos PDF sean de acceso público, lo que para mí no siempre es una opción.
KoviNET

44
@riot_starter esta solución ya no funciona, si está completamente desconectado de google se carga bien, si está completamente conectado se carga bien, sin embargo, si está en el medio (lo que sea que eso signifique) le pedirá su contraseña. Y en el caso del iframe, simplemente no se carga.
dwenaus

55
Se le permite configurar la privacidad de cualquier Docs Google entre public, sign-in requiredy private. Definitivamente es una característica oficial, teniendo en cuenta que cualquier documento en Google Docs tiene una embedopción.
b1nary.atr0phy

66
Otra cosa que debe mencionarse es la advertencia "ha realizado demasiadas solicitudes recientemente", que es una limitación.
kommradHomer

116

Usted tiene cierto control sobre cómo aparece el PDF en el navegador al pasar algunas opciones en la cadena de consulta. Estaba feliz de que esto funcionara, hasta que me di cuenta de que no funciona en IE8. :(

Funciona en Chrome 9 y Firefox 3.6, pero en IE8 muestra el mensaje "Inserte su mensaje de error aquí, si el PDF no se puede mostrar".

Sin embargo, todavía no he probado versiones anteriores de ninguno de los navegadores anteriores. Pero aquí está el código que tengo de todos modos en caso de que ayude a alguien. Esto establece el zoom al 85%, elimina las barras de desplazamiento, las barras de herramientas y los paneles de navegación. Actualizaré mi publicación si encuentro algo que también funciona en IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

66
Esa es la mejor solución porque está utilizando las capacidades del navegador y no una solución de terceros complicada. En todos los navegadores modernos (IE9, FF o Chrome), el PDF debe integrarse bien. Perdón por los usuarios de IE 6/7. Tienen que actualizar. Hemos dejado de admitir estos navegadores hace mucho tiempo. :(
Adrian P.

2
No funciona en mi tableta móvil de Chrome..FYI ... lástima, habría sido una solución rápida.
Rocco The Taco

1
+1 para abordar las opciones de zoom y desplazamiento, sin embargo, esto no funciona en la última versión de Chrome (44) ... Error al cargar el documento PDF.
NoJay

¿Es posible agregar un botón de cierre? ¿y cómo?
Roberto Sepúlveda Bravo

@RoccoTheTaco Secundario, no funciona en Chrome móvil en Android
Anónimo

66

Usando ambos <object>y <embed>le dará una mayor amplitud de compatibilidad del navegador.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

44
Esto no funcionará en los navegadores si el complemento pdf no está instalado o no está actualizado
Umair Hamid

Además, esto no se validará para aquellos que estén interesados ​​en la validación de código.
NoJay

1
Esto funcionó muy bien para mí, mientras embedque unsafeChrome y Firefox consideraron que usar la etiqueta por sí mismo .
Richie Thomas

1
Por alguna razón en Android (Chrome) no incrusta el PDF y en su lugar ofrece descargarlo. En iPhone (safari) muestra solo la primera página del PDF.
Ivan Rubinson

21

Conviértalo a PNG a través de ImageMagick y muestre el PNG (rápido y sucio).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Esta es una buena opción si necesita una solución rápida, desea evitar problemas de visualización de PDF en varios navegadores y si el PDF es solo una o dos páginas. Por supuesto, necesita instalar ImageMagick (que a su vez necesita Ghostscript) en su servidor web, una opción que podría no estar disponible en entornos de alojamiento compartido. También hay un complemento PHP (llamado imagick) que funciona así, pero tiene sus propios requisitos especiales.


O convierta la imagen a PNG utilizando una aplicación, como Vista previa en Mac.
Garrett

2
pero puedes hacer eso programáticamente?
Dan Mantyla

¿Qué pasa si el documento tiene más de 1 página? Supongo que solo mostrarás la primera página entonces
seb

@seb ha pasado un tiempo, pero pude usarlo en archivos PDF de 2 o 3 páginas. No sería prudente ir mucho más lejos que eso, creo que los navegadores móviles tienen dificultades para mostrar imágenes como esa. Es por eso que lo llamé el método "rápido y sucio", pero creo que es bueno siempre que el PDF no sea más que unas pocas páginas.
Dan Mantyla

1
Si abre el PDF utilizando la biblioteca zend, puede hacer foreach($pdf->pages as $page)y crear una imagen para cada página
99 Problemas - La sintaxis no es uno

19

Eche un vistazo a este código: para incrustar el PDF en HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

66
Esto no parece funcionar. Siempre termino con una pantalla gris en blanco en lugar del pdf. Pero el cambio srcde data, como en la respuesta de @ Gayle, funciona.
Mottie

1
Estoy usando Chrome 44 y no funcionará. También intenté cambiar los datos a src.
NoJay

1
type = "application / pdf" soluciona el problema. Funciona bien en cromo.
Gavin Simpson

13

FDView combina PDF2SWF (que se basa en xpdf ) con un visor SWF para que pueda convertir e incrustar documentos PDF sobre la marcha en su servidor.

xpdf no es un conversor de PDF perfecto. Si necesita mejores resultados, Ghostview tiene la capacidad de convertir documentos PDF a otros formatos para los que puede construir más fácilmente un visor Flash.

Pero para documentos PDF simples, FDView debería funcionar razonablemente bien.


¿FDView está disponible en otro lugar? code4net.com parece haber desaparecido.
Michael Myers

@Michael No es que pueda encontrarlo fácilmente. Dejaré esta respuesta en caso de que alguien vuelva a organizar fdview en otro lugar.
Adam Davis

12

Nuestro problema es que, por razones legales, no podemos almacenar temporalmente un PDF en el disco duro . Además, no se debe volver a cargar toda la página al mostrar un PDF como Vista previa en el navegador.

Primero probamos PDF.jS. Funcionó con Base64 en el visor para Firefox y Chrome. Sin embargo, fue inaceptablemente lento para nuestro PDF. IE / Edge no funcionó en absoluto.

Por lo tanto, lo probamos con una cadena Base64 en una etiqueta de objeto HTML. De nuevo, esto no funcionó para IE / Edge (quizás el mismo problema que con PDF.js). En Chrome / Firefox / Safari nuevamente no hay problema. Por eso elegimos una solución híbrida. IE / Edge usamos un IFrame y para todos los demás navegadores la etiqueta de objeto.

La solución IFrame, por supuesto, también funcionaría para Chrome y compañía. La razón por la que no utilizamos esta solución para Chrome es que, aunque el PDF se muestra correctamente, Chrome realiza una nueva solicitud al servidor tan pronto como hace clic en "descargar" en la vista previa . El PDFHelperTransferData de campo oculto requerido (para enviar nuestros datos de formulario necesarios para la generación de PDF) ya no se establece porque el PDF se muestra en un IFrame. Para esta característica / error verChrome envía dos solicitudes al descargar un PDF (y cancela una de ellas) .

Ahora el problema sigue siendo niños IE9 e IE10. Para estos, renunciamos a una solución de vista previa y simplemente enviamos el documento haciendo clic en el botón de vista previa como descarga para el usuario (en lugar de la vista previa). Hemos intentado mucho, pero incluso si hubiéramos encontrado una solución, el esfuerzo adicional para esta pequeña parte de los usuarios no habría valido la pena. Puede encontrar nuestra solución para la descarga aquí: descargue PDF sin actualizar con IFrame .

Nuestro Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Nuestro HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Para verificar el tipo de navegador para IE / Edge, consulte aquí: ¿Cómo puedo detectar Internet Explorer (IE) y Microsoft Edge usando JavaScript? Espero que estos hallazgos le ahorren tiempo a alguien más.


Lo siento, pero no entiendo, ¿qué tipo de valor tiene la variable "transferData"?
Kate

1
Hola @Kate, en nuestro caso, generamos el PDF basado en la entrada de un usuario en nuestro formulario web. "transferData" contiene los datos que se envían como JSON a la función de generación de PDF en la API web. He agregado una línea más de código para aclaraciones.
George Maharis

10

Puede usar la ubicación relativa del pdf guardado de esta manera:

Ejemplo 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Ejemplo2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>


10
  1. Crea un contenedor para guardar tu PDF

    <div id="example1"></div>
  2. Dígale a PDFObject qué PDF incrustar y dónde incrustarlo

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
  3. Opcionalmente, puede usar CSS para especificar el estilo visual, incluidas las dimensiones, los bordes, los márgenes, etc.

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>

fuente: https://pdfobject.com/


Esta fue una muy buena solución y funcionó bien en conjunto con el estilo bootstrap. Todo fue por encima de otros elementos de arranque.
netfed

¿Intentaste con blob file? Utilicé esto con pdf.output('bloburl')lib jspdf pero parece que no funciona en IE11.
Hoang Tran Son

8

Scribd ya no requiere que aloje sus documentos en su servidor. Si crea una cuenta con ellos para obtener una ID de editor. Solo se necesitan unas pocas líneas de código JavaScript para cargar archivos PDF almacenados en su propio servidor.

Para obtener más detalles, consulte Herramientas para desarrolladores .


1
¿Podría publicar otro enlace que muestre cómo se hace esto? No está claro en el enlace que publicaste.
SuperElectric

Parece que han actualizado su sitio web y han cambiado esta página. Creo que esta página tiene el contenido al que me refería en mi publicación original: scribd.com/developers/api?method_name=Javascript+API
Bjorn

Desearía poder gustar esto más de una vez, funciona perfectamente. Desplácese hasta la parte inferior del sitio web y haga clic en API para ver ejemplos.
Rocco The Taco

1
Las inscripciones ahora están cerradas para scribd.
Lance Fisher

4
<object width="400" height="400" data="helloworld.pdf"></object>

4

PdfToImageServlet usando el convertcomando ImageMagick .

Ejemplo de uso: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>


4

Así lo hice con AXIOS y Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

agregue urlPDF dinámicamente a HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

3

Una de las opciones que debe considerar es Notable PDF.
Tiene un plan gratuito a menos que esté planeando colaborar en línea en tiempo real en PDF

Incruste lo siguiente iframeen cualquier html y disfrute de los resultados:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

2

Para transmitir el archivo al navegador, consulte la pregunta sobre desbordamiento de pila Cómo transmitir un archivo PDF como binario al navegador utilizando .NET 2.0 : tenga en cuenta que, con pequeñas variaciones, esto debería funcionar tanto si está sirviendo un archivo desde el sistema de archivos o generado dinámicamente.

Dicho esto, el artículo de MSDN al que se hace referencia toma una visión bastante simplista del mundo, por lo que es posible que desee leer Transmitir con éxito un PDF al navegador a través de HTTPS también para algunos de los encabezados que necesite suministrar.

Usando ese enfoque, un iframe es probablemente la mejor manera de hacerlo. Tenga un formulario web que transmita el archivo y luego coloque el iframe en otra página con su srcatributo establecido en el primer formulario.


44
¿@downvoter quiere explicar por qué anónimamente rechaza una respuesta de 10 años?
GalacticCowboy

1
  1. Construya un blob de bytes de entrada PDF
  2. Utilice un iframe y PDF.js parcheados con esta solución alternativa para varios navegadores

El URI para el iframe debería verse así:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Ahora FF, Chrome, IE 11 y Edge muestran el PDF en un visor en el iframe pasado a través de URI de blob estándar en la URL.


1

Tuve que previsualizar un PDF con React, así que después de probar varias bibliotecas, mi solución óptima fue obtener los datos y enviarlos.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

0

Si no desea alojar PDF.JS por su cuenta, puede probar DocDroid . Es similar al visor de PDF de Google Drive, pero permite la marca personalizada.


0

solo use iFrame para PDF.

Tenía necesidades específicas en mi aplicación React.js, probé millones de soluciones pero terminé con un iFrame :) ¡Buena suerte!


-7

Encontré que esto funciona bien y el navegador lo maneja en Firefox. No he comprobado IE ...

<script>window.location='url'</script>

¿Qué se supone que esto debe lograr? No puedo ver cómo responde la pregunta.
TRiG

Cuando estoy incrustando un PDF en mi HTML, encuentro que la mejor manera es tener un enlace a este documento. como <a href=" server1.network/trifold_JonesChiro.pdf "target='_blank'> Client Portal Trifold (muestra) </a> a veces es una respuesta limpia para abrir una página y mostrar el pdf vs tring para colocarlo en el html También permite que el pdf permanezca abierto en una pestaña.
Wynn

¿Entonces su recomendación es vincular, no incrustar? Eso está bien, pero como respuesta esto no está claro.
TRiG
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.