GUÍA DEFINITIVA: La mejor forma de incrustar documentos PDF de Google Drive y de otras fuentes

Aprenda a incrustar contenido de páginas PDF en su sitio web utilizando el nuevo visor de PDF de Adobe y ofrezca una experiencia de lectura de PDF mejorada a sus lectores.

¿Cómo se inserta un documento PDF en su sitio web para verlo en línea? Una opción popular es subir el archivo PDF a un servicio de almacenamiento en línea, algo como Google Drive o OneDrive de Microsoft, hacer público el archivo y luego copiar y pegar el código IFRAME proporcionado por estos servicios para incrustar rápidamente el documento en cualquier sitio web.

A continuación, se muestra un código de inserción de PDF de muestra para Google Drive que funciona en todos los navegadores.

  <iframe frameborder="0" scrolling="no"
      width="100%" height="800"
     src="https://drive.google.com/file/d/<<FILE_ID>>/preview">
  </iframe>

Este es el método más común para incrustar archivos PDF: es simple, simplemente funciona, pero la desventaja es que no tiene control sobre cómo se presentan los archivos PDF en sus páginas web.

Si prefiere ofrecer una experiencia de lectura más personalizada e inmersiva para archivos PDF en su sitio web, consulte el nuevo SDK de Adobe View. Esto es parte de la plataforma Adobe Document Cloud, pero no cuesta un centavo.

Aquí hay algunas características únicas que hacen que esta solución de incrustación de PDF se destaque:

• Puede agregar herramientas de anotación dentro del visor de PDF. Cualquiera puede anotar el PDF incrustado y descargar el archivo modificado.
• Si ha incrustado un documento extenso con varias páginas, los lectores pueden usar la vista en miniatura para saltar rápidamente a cualquier página.
• El visor de PDF se puede personalizar para ocultar opciones para descargar e imprimir archivos PDF.
• Hay análisis integrados para que sepa cuántas personas vieron su archivo PDF y cómo interactuaron con el documento.
• Y mi característica favorita de ViewSDK es el modo de inserción en línea. Déjame explicarte eso en detalle.

Mostrar páginas PDF en línea como imágenes y videos

En el modo en línea, y esto es exclusivo de Adobe View SDK, todas las páginas del documento PDF incrustado se muestran a la vez para que los visitantes de su sitio no tengan que desplazarse por otro documento con la página web principal. Los controles de PDF están ocultos para el usuario y las páginas PDF se combinan con imágenes y otro contenido HTML en su página web.

Para obtener más información, consulte esta demostración en vivo: aquí: https://codepen.io/labnol/full/oNXgevg, el documento PDF contiene 7 páginas, pero todas se muestran a la vez como una página web larga, lo que ofrece una navegación fluida.

Cómo incrustar archivos PDF con Adobe View SDK

Se necesitan algunos pasos adicionales para usar View SDK. Vaya a adobe.io y cree un nuevo conjunto de credenciales para su sitio web. Tenga en cuenta que las credenciales son válidas solo para un dominio, por lo que si tiene varios sitios web, necesitará un conjunto diferente de credenciales para ellos. URL PARA CREAR CREDENCIAL: https://www.adobe.io/apis/documentcloud/dcsdk/gettingstarted.html

A continuación, abra el patio de recreo y genere el código de inserción. Debe reemplazar el clientId con su conjunto de credenciales. La URL del código de muestra debe apuntar a la ubicación de su archivo PDF. EJEMPLO: https://documentcloud.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf

<div id="adobe-dc-view" style="width:100%"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<<YOUR_CLIENT_ID>>",
            divId: "adobe-dc-view"
        });
        adobeDCView.previewFile({
            content: { location: { url: "<<PDF Location>>" } },
            metaData: { fileName: "<<PDF File Name>>" }
        }, {
            embedMode: "IN_LINE",
            showDownloadPDF: false,
            showPrintPDF: false
        });
    });
</script>

Consulte los documentos oficiales y el repositorio de código para obtener más ejemplos.

REPOSITORIO: https://github.com/adobe/pdf-embed-api-samples

OFICIAL DOCUMENTACIÓN: https://www.adobe.io/apis/documentcloud/dcsdk/docs.html

OTRAS FORMAS:

GENÉRICA PARA TODOS LOS NAVEGADORES:

<iframe height="500px" src="AQUI-VA-EL-LINK" width="100%">

    </iframe>

HACIENDO REFERENCIA MEDIANTE TEXTO

<object data="myfile.pdf" type="application/pdf" width="100%">

  <p>Alternative text - include a link <a href="AQUI-VA-EL-LINK">to the PDF!</a></p>

</object>

GENÉRICA PARA TODOS LOS NAVEGADORES CON OTRA CODIFICACIÓN:

<embed height="500px" src="AQUI-VA-EL-LINK" width="100%"></embed>