Biblioteca de visor de PDF JavaScript de código abierto
Pruebe esta API de JavaScript gratuita y de código abierto como biblioteca de analizador, visor, lector y renderizador de PDF.
¿Qué es PDF.js?
PDF.js es una biblioteca de visualización de PDF basada en JavaScript y HTML5 de código abierto desarrollada por Mozilla que permite ver documentos PDF (formato de documento portátil) en el navegador.
PDF.js admite varias funciones que se enumeran a continuación:
- Renderizar archivos PDF: puede abrir y ver, leer o renderizar documentos PDF en navegadores web.
- Imprimir/guardar archivos PDF: PDF.js también permite imprimir o guardar documentos PDF desde su navegador web favorito.
- Modo de presentación: Al utilizar el modo de presentación, puede mostrar páginas PDF en pantalla completa y navegar a cada página como si fuera una diapositiva de presentación.
- Navegación de PDF: PDF.js proporciona controles de navegación más sencillos mediante los cuales puede pasar a las páginas anteriores o siguientes. También puede saltar rápidamente a la página deseada ingresando el número de la página.
- Anotación de PDF: También puede anotar documentos PDF agregando texto, imágenes o dibujos en las páginas PDF.
- Rotar páginas PDF: Con PDF.js, también puede rotar páginas PDF en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj.
- Desplazamiento de PDF: PDF.js ofrece buenos controles para desplazar las páginas horizontal o verticalmente, etc.
- Propiedades del documento PDF: Por último, pero no menos importante, también puede ver las propiedades de los documentos PDF dentro del navegador utilizando el visor PDF.js.
Primeros pasos con PDF.js
Hay tres formas de obtener PDF.js y empezar a utilizarlo en tus proyectos web.
1. Construir desde la fuente
Puede clonar el repositorio PDF.js desde GitHub y compilarlo usted mismo después de instalar Node.js, gulp y dependencias de PDF.js siguiendo los pasos a continuación:
Clonar el repositorio git PDF.js en la máquina local y cambiar a la carpeta pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Instalar Node.js
https://nodejs.org/en/download
Instalar el paquete gulp globalmente
npm install -g gulp-cli
Instalar dependencias de PDF.js
npm install
Ejecute el servidor gulp y abra el visor en el navegador en http://localhost:8888/web/viewer.html
gulp server
2. Utilice una distribución prediseñadas
PDF.js también ofrece distribuciones prediseñadas junto con el código fuente que puede encontrar en lanzamientos de PDF.js en GitHub. . Puede descargar la biblioteca PDF.js prediseñadas y comenzar a usarla.
3. Utilice la biblioteca alojada a través de CDN
PDF.js también está alojado en servidores CDN gratuitos. A continuación se comparten algunos enlaces:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Ejecute el visor PDF.js
Después de descargar y extraer una biblioteca de distribución prediseñadas de GitHub, encontrará dos carpetas: build y web. Los archivos de la biblioteca PDF.js se pueden encontrar en la carpeta build, mientras que la carpeta web contiene un proyecto de visor que incluye visor.html, visor.css, visor.js y archivos relacionados. Si revisa el código de Viewer.html, puede ver que hace referencia a la biblioteca pdf.js desde la carpeta de compilación y también a otros archivos css y js relacionados.
Ejecutemos visor.html en el navegador para ver cómo se ve el visor PDF.js:
Renderizar/Ver documentos PDF
Para simplemente renderizar o ver un documento PDF en el navegador usando la biblioteca del visor PDF.js, debemos incluir la biblioteca PDF.js en el encabezado de nuestro documento HTML usando la etiqueta script y agregar un canvas al cuerpo HTML y luego agregue el código JavaScript necesario para usar pdfjsLib y prometa objetos para manejar la carga y representación asincrónica del documento PDF.
El código anterior simplemente carga un documento PDF en el navegador sin ninguna interfaz de usuario ni controles como se muestra a continuación:
Demostración en línea
Pruebe esta en línea Demostración de PDF.js Viewer para explorar todas las funciones de la biblioteca PDF.js.
Conclusión
PDF.js es una biblioteca de visualización de PDF JavaScrpit gratuita y de código abierto con una sólida comunidad. Proporciona compatibilidad con varios navegadores, tanto para navegadores modernos como heredados. Sí, la experiencia del usuario en los navegadores antiguos puede no ser la misma que la de los modernos, pero sigue siendo buena como biblioteca gratuita. Es seguro y personalizable. Las funciones son limitadas, pero como visor de PDF funciona muy bien.
PDF.js proporciona buenas API y arquitectura para crear un visor de PDF basado en web. Dado que agregar más controles de interfaz de usuario al visor lleva mucho tiempo para ahorrar tiempo a los desarrolladores, PDF.js también proporciona el código fuente de un visor de PDF completamente funcional y rico en funciones que puede encontrar (consulte visor.html, visor.js y Viewer.css, etc.) en la carpeta web del paquete de distribución de la biblioteca PDF.js.