mostrar - ¿La forma recomendada de incrustar PDF en HTML?

link pdf en html

Question

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

• iFrame?
• ¿Objeto?
• ¿Empotrar?

¿Qué dice Adobe sobre sí mismo?

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

Answer 1

1. Construir un blob de los bytes de entrada de PDF
2. Use un iframe y PDF.js parchados con esta solución alternativa para varios navegadores

El URI para el iframe debe verse algo como esto:

/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 un URI de blob estándar en la URL.

Answer 2

1. Crea un contenedor para guardar tu PDF

   <div id="example1"></div>

2. Indique 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, incluyendo dimensiones, bordes, márgenes, etc.

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

fuente: https://pdfobject.com/

Answer 3

Conviértalo a PNG a través de ImageMagick y visualice 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 página o dos. Por supuesto, necesita tener instalado 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 de PHP (llamado imagick) que funciona así, pero tiene sus propios requisitos especiales.

Answer 4

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>

Answer 5

El uso de <object> y <embed> brindará una mayor amplitud de compatibilidad con el 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>

Answer 6

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

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

Answer 7

Esta es la forma en que 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)
        })

agrega urlPDF dinámicamente a HTML:

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

Answer 8

Esto es rápido, fácil, al punto 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">

Answer 9

Nuestro problema es que, por razones legales, no se nos permite almacenar temporalmente un PDF en el disco duro. Además, la página completa no debe volver a cargarse cuando se muestra un PDF como Vista previa en el navegador.

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

Por lo tanto, lo intentamos con una cadena Base64 en una etiqueta de objeto HTML. Esto tampoco funcionó para IE / Edge (quizás el mismo problema que con PDF.js). En Chrome / Firefox / Safari de nuevo 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 usamos 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 campo oculto requerido pdfHelperTransferData (para enviar los datos de nuestro formulario necesarios para la generación de PDF) ya no se configura porque el PDF se muestra en un IFrame. Para esta característica / error, Chrome envía dos solicitudes al descargar un PDF (y cancela una de ellas) .

Ahora el problema son los hijos IE9 y IE10. Para esto, abandonamos una solución de vista previa y simplemente enviamos el documento haciendo clic en el botón de vista previa para descargar al 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 usuarios no valdría 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 utilizando JavaScript? Espero que estos hallazgos le ahorren tiempo a otra persona.

Answer 10

Para transmitir el archivo al navegador, vea la pregunta sobre el desbordamiento de pila Cómo transmitir un archivo PDF como binario al navegador usando .NET 2.0 . Tenga en cuenta que, con pequeñas variaciones, esto debería funcionar si está sirviendo un archivo del sistema de archivos. o generados dinámicamente.

Dicho esto, el artículo de MSDN al que se hace referencia tiene 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 , así como a algunos de los encabezados que deba proporcionar.

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

Answer 11

Probablemente el mejor enfoque es utilizar la biblioteca PDF.JS Es un procesador de HTML5 / JavaScript puro 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

Answer 12

Scribd ya no requiere que alojes tus 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 más detalles, vea Herramientas de desarrollo .

Answer 13

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

Answer 14

Si puede convertir su pdf en una imagen, vaya a https://www.base64-image.de. Coloque su imagen dentro y la convertirá a base64 para usted. Luego coloca el código en una etiqueta de imagen.

Answer 15

También puede utilizar el visor de PDF de Google para este propósito. Por lo que sé, no es una función oficial de Google (¿me equivoco en esto?), Pero me funciona muy bien y sin problemas. Necesitas subir tu PDF en algún lugar antes y solo 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.

Answer 16

Tiene cierto control sobre cómo aparece el PDF en el navegador al pasar algunas opciones en la cadena de consulta. Estaba feliz de este trabajo, 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 no se puede mostrar el PDF".

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>

Answer 17

Una de las opciones que debes considerar es Notable PDF
Tiene un plan gratuito a menos que esté planeando hacer una colaboración en línea en tiempo real en pdfs

Incruste el siguiente iframe en cualquier html y disfrute de los resultados:

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

Answer 18

FDView combina PDF2SWF (que a su vez 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 cierta capacidad para convertir documentos PDF a otros formatos para los que puede crear un visor de Flash más fácilmente.

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

Answer 19

PdfToImageServlet usando el comando de convert de ImageMagick.

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

Answer 20

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