Biblioteca de visores de PDF de código abierto en JavaScript
Biblioteca JavaScript gratuita y de código abierto para ver documentos PDF.
¿Qué es PDFObject?
PDFObject es una biblioteca JavaScript gratuita y de código abierto desarrollada para incrustar documentos PDF en páginas web. Funciona generando un elemento de incrustación HTML y luego integrándolo en la estructura HTML. Luego, el elemento de incrustación muestra el documento PDF. PDFObject no es un renderizador en sí mismo; más bien, se centra en crear el elemento de incrustación y colocarlo dentro del HTML. Puede crear elementos de incrustación para mostrar archivos PDF en tamaño completo o dentro de secciones específicas de la página web.
A continuación se presentan algunas de las características principales de PDFObject:
- Mecanismo de respaldo: PDFObject tiene un mecanismo de respaldo, por lo que en los casos en que un navegador no admite la incrustación de PDF, PDFObject activa automáticamente la lógica de respaldo, lo que permite a los desarrolladores proporcionar un enlace al PDF o cualquier otra lógica alternativa según sea necesario.
- Integración con PDF.js: PDFObject ofrece una integración opcional con PDF.js, lo que permite a los desarrolladores incrustar archivos PDF independientemente del visor de PDF predeterminado del navegador. Esta función es útil cuando el navegador no admite la incrustación de documentos PDF en HTML.
- Parámetros de apertura de PDF: PDFObject es compatible con los Parámetros de apertura de PDF, propiedad de Adobe, lo que permite a los desarrolladores especificar parámetros para la visualización de PDF. Esto incluye opciones como el modo de visualización y otras configuraciones específicas de Adobe. Todos estos parámetros se pueden encontrar aquí.
Introducción a PDFObject
Podemos descargar la biblioteca PDFObject usando el módulo npm:
Instalar usando NPM
npm i pdfobject
Incrustar PDF en HTML con verificación de compatibilidad del navegador
Podemos incrustar un documento PDF en HTML utilizando la biblioteca PDFObject. Inicialmente, comprobaremos si el navegador admite la incrustación del documento PDF en HTML utilizando el método supportsPDFs de la biblioteca PDFObject. Si devuelve verdadero, lo que indica que admite la incrustación de PDF en HTML, entonces incrustaremos el PDF en el HTML utilizando el método embed("document_name.pdf","#elementid"). Esta función incrustará el PDF en un elemento específico en el HTML. Para la incrustación de PDF de tamaño completo, no mencionaremos ningún ID de elemento y llamaremos al método como embed("document_name.pdf"). Sin embargo, si devuelve falso, lo que indica que no admite la incrustación de PDF en HTML, pasaremos a otra lógica alternativa según sea necesario. Consulte el siguiente fragmento de código para obtener más detalles:
Producción
La siguiente salida muestra el documento PDF incrustado en el HTML:
Crear un mecanismo de respaldo
Podemos establecer un mecanismo de respaldo al incrustar un PDF en una página web utilizando PDFObject, que se activa cuando el navegador no admite la incrustación de PDF en HTML. PDFObject utiliza un parámetro llamado fallbackLink que contiene una lógica alternativa al llamar a la función embed. Por lo tanto, si un navegador no admite la incrustación de archivos PDF, el código presente en fallbackLink se ejecuta en el elemento div designado. Consulte el siguiente fragmento de código para obtener más detalles:
Producción
La captura de pantalla de salida muestra el contenido que muestra el mecanismo de respaldo. El mecanismo de respaldo se activó cuando el navegador no admitía la incorporación de archivos PDF en HTML.
Incrustar PDF con los parámetros de apertura de PDF de Adobe
Podemos incrustar archivos PDF junto con algunos parámetros de apertura utilizando la biblioteca PDFObject. Usaremos el método PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) para incrustar el documento PDF en el HTML junto con los parámetros de apertura. Estos Parámetros de apertura de PDF incluyen funciones como abrir el PDF y desplazarse hasta un número de página específico. Consulte el siguiente fragmento de código para obtener más detalles:
Producción
La siguiente captura de pantalla muestra el documento PDF incrustado en el HTML con parámetros adicionales que hacen que el elemento incrustado se desplace a la página número 3 después de renderizarlo:
Incruste PDF mediante la integración de PDF.js
Como sabemos, PDFObject depende de la compatibilidad del navegador para incrustar archivos PDF en HTML, pero proporciona un método alternativo para representar archivos PDF si el navegador no lo admite. El método alternativo es integrar PDF.js con PDFObject. Para hacerlo, tendremos que configurar PDF.js en nuestro servidor y luego pasaremos los parámetros ForcePDFJS: true y PDFJS_URL: path/to/viewer.html/in/pdf.js a la función embed.
Nota: En el siguiente fragmento de código de ejemplo, hemos creado e iniciado un servidor que contiene la biblioteca PDF.js, de modo que http://localhost:8888 apunta a la biblioteca PDF.js.
Producción
La siguiente captura de pantalla muestra el documento PDF generado al integrar PDFObject con PDF.js:
Conclusión
En conclusión, PDFObject es una biblioteca de JavaScript fácil de usar para incrustar documentos PDF en HTML. Si bien no funciona como un renderizador y depende de la compatibilidad del navegador con elementos incrustados, lo que puede causar problemas como una interfaz de usuario rota en navegadores que no admiten elementos incrustados, la biblioteca tiene características para resolver tales problemas a través de su detección de compatibilidad con elementos incrustados y mecanismo de respaldo. También podemos renderizar archivos PDF en navegadores que no admiten elementos incrustados integrando PDF.js con PDFObject. A pesar de sus limitaciones, PDFObject se destaca como una herramienta valiosa para incrustar y renderizar documentos PDF en páginas web.
