Biblioteca de visor de PDF JavaScript de código abierto
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 inserción HTML y luego integrándolo en la estructura HTML. Luego, el elemento incrustado representa el documento PDF. PDFObject no es un renderizador en sí mismo; más bien se centra en crear el elemento de inserción y colocarlo dentro del HTML. Puede crear elementos incrustados para mostrar archivos PDF en tamaño completo o dentro de secciones específicas de la página web.
Las siguientes son 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 archivos 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 de PDF.js: PDFObject proporciona integración opcional con PDF.js, lo que permite a los desarrolladores incrustar archivos PDF independientemente del PDF predeterminado del navegador. espectador. Esta característica es útil cuando el navegador no admite la incrustación de documentos PDF en HTML.
- Parámetros de apertura de PDF: PDFObject admite los parámetros de apertura de PDF patentados por 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í.
Primeros pasos con 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 con el navegador
Podemos incrustar un documento PDF en HTML usando 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 HTML utilizando el método embed("document_name.pdf","#elementid"). Esta función incrustará el PDF en un elemento específico del HTML. Para la inserció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
El siguiente resultado muestra el documento PDF incrustado en HTML:
Crear un mecanismo de respaldo
Podemos establecer un mecanismo alternativo al incrustar un PDF en una página web usando 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 mostrado por el mecanismo de reserva. El mecanismo alternativo se activó cuando el navegador no admitía la incrustació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 a 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 HTML con parámetros adicionales que hacen que el elemento incrustado se desplace a la página número 3 después de renderizarlo:
Incrustar PDF integrando 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 ForcePDFJS: true y PDFJS_URL: path/to/viewer.html/in/pdf. Parámetros .js para 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, por lo que http://localhost:8888 apunta a la biblioteca PDF.js.
Producción
La siguiente captura de pantalla muestra el documento PDF renderizado integrando PDFObject con PDF.js:
Conclusión
En conclusión, PDFObject es una biblioteca JavaScript fácil de usar para incrustar documentos PDF en HTML. Si bien no funciona como renderizador y depende del soporte del navegador para elementos incrustados, lo que puede causar problemas como una interfaz de usuario rota en navegadores que no admiten elementos incrustados, la biblioteca tiene funciones para resolver dichos problemas a través de su detección de soporte para elemento de inserción 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.
