¿Forma recomendada para incrustar PDF en HTML?

¿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.

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

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">

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.

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>

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>

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.

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>

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.

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.

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>

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/

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 .

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

PdfToImageServlet usando el convertcomando ImageMagick .

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

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>

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>

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.

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.

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>

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.

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!

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

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