Es sorprendente la cantidad de información que tenemos hoy en día almacenada en formato PDF. Según la asociación PDF, cada año se crean aproximadamente 2,5 billones de PDFs, lo que supone el 6 por ciento de la web. Sin embargo, como desarrollador web, los PDF en un sitio web pueden presentar una variedad de desafíos:
- Las experiencias de visualización varían mucho entre los diferentes usuarios y dispositivos porque dependen de un visor de PDF. Ya sea integrado en los navegadores web o en bibliotecas online gratuitas, algunos visores son mejores que otros. Por lo general, Adobe Acrobat Reader es el estándar universal para visualizar correctamente los PDF.
- Me resulta difícil poder incorporar los PDF al resto de mi sitio web. La mayoría de las veces, los PDFs pedirían a los usuarios que se descargaran los PDFs en sus dispositivos.
- La conversión de los PDFs a HTML es difícil y poco fiable. Si quiero presentar el contenido dentro de una página web que está en formato PDF, a menudo podría aplanar a PDF para que sea más fácil de incrustar.
- No tengo visibilidad de cómo mi visitante está viendo esos PDFs. Esto significa que no tengo ni idea de si alguien está leyendo ciertas páginas, cuánto tiempo pasan en esas páginas, etc.
- Ver en tiempo real los diferentes modos de incrustación disponibles para tus PDFs.
- Personalizar qué características quieres como parte del visor como herramientas de anotación, descarga de PDF, impresión de PDF, controles de página, etc.
- Genera código para que lo pegues directamente en tu sitio web.
- Para crear un ID de cliente, necesitará tener un ID de Adobe. Si no tienes uno, puedes registrarte aquí usando una dirección de correo electrónico, Google, Facebook o Apple ID.
- Necesitas configurar el dominio de tu aplicación para que esto funcione.
- Reemplace <YOUR_CLIENT_ID> con el ID de cliente que generó.
- Reemplace el parámetro url con la URL de su PDF que desea ver.
NOTA: Debido a que PDF Embed renderiza del lado del cliente en el navegador, respetará cualquier restricción de dominio cruzado establecida, por lo que puede necesitar asegurarse de que sus cabeceras permitan el enlace entre dominios. - Cambie fileName por el nombre de su documento. Esto aparecerá en el visor.
- Componente de visor de PDF para AEM
- PDF like a boss
- Complemento de Microsoft SharePoint
- Adobe Acrobat para G Suite
Afortunadamente, Adobe ha lanzado Adobe PDF Embed API (PDF Embed), una manera fácil para que usted pueda incorporar un PDF directamente en su sitio web con sólo un simple fragmento de código. Su uso es totalmente gratuito y se renderiza en el lado del cliente dentro de su aplicación web. No tiene que aprender una sofisticada biblioteca de PDF, y es súper fácil de hacer. No se renderiza ningún dato en los servidores de Adobe. De hecho, incluso puedes aprender a jugar con él aquí.
¡NADA! Eso es lo mejor de esto. No necesitas nada más que una página web para usar PDF Embed.
Usando el sitio de demostración para probar la API de PDF Embed
La forma más fácil de familiarizarse con el PDF Embed es probarlo en el sitio de demostración. Es un recurso fácil para empezar porque te permite:
Conseguir tu ID de cliente
Si quieres probar el PDF Embed en tu propio código, funciona sin ID de cliente cuando lo usas localmente. Sin embargo, si quieres incorporarlo realmente en tu sitio web, necesitarás obtener el Client ID. Obtenga su ID de cliente aquí.
Aquí hay un par de consejos importantes:
Una vez que crees tu Client ID, querrás copiarlo y usarlo en tu código.
NOTA: Aunque puede editar sus configuraciones en la consola de Adobe.io, querrá ir al enlace para crear su clave. Si creas tu clave desde la Consola de Adobe.io, no te dará la opción de configurar tu dominio.
Elegir el modo de incrustación
Una de las cosas potentes del PDF Embed es que tienes diferentes modos de incrustación para elegir:
Ventana completa
El modo de visualización Full Window le permite crear una experiencia de visualización similar a la de Adobe Acrobat Reader en su ordenador e incrustarla en su sitio web. Me parece ideal cuando se ven documentos de formato largo, o si quiero tener una experiencia familiar de visualización de PDF en mi UI.
Tamaño del contenedor
Los contenedores de tamaño son estupendos para contenidos como presentaciones de PowerPoint que fueron convertidas a PDF, o una serie de instrucciones. Me parece menos ideal de una experiencia si usted está incorporando PDFs de forma larga.
En línea
La vista en línea puede ayudar a los diseñadores a incrustar sus diseños en una página web sin tener que reconstruirlos o aplanarlos en una imagen. La vista en línea toma tu PDF y lo renderiza en línea como HTML. Me gusta este modo de incrustación para cuando quieres mostrar contenido como infografías que has diseñado en Illustrator, InDesign, etc. y exportado a PDF, pero quieres que siga siendo buscable y tenga hipervínculos sin tener que preocuparte de rediseñar para la web.
Caja de luz
La caja de luz abre el visor de PDF en la parte superior de la página web para ofrecer una vista más centrada. Este modo es ideal cuando tienes enlaces a archivos PDF en todo tu sitio web pero quieres controlar la experiencia de visualización, recopilar análisis y activar eventos en función de cómo interactúa tu audiencia con los archivos PDF que has publicado.
Generando tu código
Cuando estés usando el Sitio de Demostración y hagas clic en Generar código, se verá algo así:
Para empezar, querrás reemplazar los siguientes elementos:
Una vez hecho esto, podrás incrustar tu PDF en tu sitio web. ¡Es así de fácil!
Ejemplos que usan Services SDK hoy
Hay una serie de aplicaciones que ya usan Services SDK hoy:
Conclusión
PDF Embed realmente permite una gran flexibilidad para aprovechar los PDFs con sus sitios web. Hay mucho más que puedes hacer con él desde Analytics, Event Listeners, y más que puedes aprender más en esta documentación.
Queremos saber de ti
Una vez que eches un vistazo al PDF Embed, ¡nos encantaría escuchar tus opiniones! Participa en el foro de Adobe Document Cloud para dar tu opinión, o responde a este artículo
Actualización (07/07/2020): Actualizado para añadir el nuevo modo de incrustación Lightbox y añadida la nueva imagen de cabecera.
Actualización (31/07/2020): Actualizado para reflejar el nuevo branding.