PDF.js es un excelente proyecto de código abierto que se actualiza con frecuencia y se le agregan nuevas funciones, aunque parezca feo, o tal vez digamos que parece obsoleto. ¿Qué tal obtener las últimas funciones y correcciones de PDF desde PDF.js pero tener una apariencia elegante en la presentación?

El visor de PDF de PdfJsKit es discreto, no cambia directamente el código de PDF.js, solo incluye PDF.js en un iframe y en tiempo de ejecución anula HTML, JS y CSS para ofrecer una apariencia moderna y elegante y una mejor interfaz de usuario. estructura y usabilidad y nuevas características. De esta manera siempre podremos actualizar PDF.js a la última versión fácilmente y obtener todas las correcciones de errores y mejoras.

Otros visores de PDF basados ​​en PDF.js generalmente no actualizan el aspecto predeterminado, y los que sí lo hacen generalmente pierden funcionalidad debido a que se separan en componentes pero los implementan parcialmente u ofrecen una API defectuosa/parcial.

Empezando

Instala el paquete en tu proyecto:

npm install pdfjskit

Cuando se instala el paquete (o se actualiza la versión), los activos (css, imágenes, etc.) utilizados por PdfJsKit se copiarán automáticamente de node_modules\pdfjskit\dist\pdfjskit a public\pdfjskit. El subdirectorio público de tu proyecto es un lugar común para los recursos web, pero si tu marco JS tiene una estructura de directorio diferente, puedes mover los recursos a otro lugar.

De forma predeterminada, PdfJsKit carga recursos desde el subdirectorio pdfjskit en relación con la página de host, pero puede cambiar esta ruta pasando la opción LibraryPath personalizada al constructor de PdfViewer.

Uso

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Tenga en cuenta que el paquete NPM contiene un módulo ES6 pdfjskit.min.mjs; también se proporciona una versión de script pdfjskit.min.js en el directorio GitHub dist/pdfjskit y en el paquete para desarrolladores que se ofrece aquí.

Usando PdfJsKit en proyectos JS simples con Vite

Puedes usar cualquier marco JS (React, Vue, Angular, Svelte, Blazor, etc.) con PdfJsKit; sin embargo, para simplificar en esta publicación, mostraré el uso para proyectos JS simples.

Para proyectos JS simples, recomiendo usar Vite, de esta manera puedes importar desde el módulo en archivos HTML fácilmente:

1. Crear una plantilla de proyecto Vite:
   

   npm create vite@latest
   

   Elige la configuración:
   

   ✔ Project name: … pdfjskit-vite-example
   ✔ Select a framework: › Vanilla
   ✔ Select a variant: › JavaScript
   

2. Se creará un subdirectorio con el nombre de tu proyecto, haz lo siguiente:
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. Edite index.html y reemplace el contenido con:
   

4. Ahora puedes ejecutar el servidor web de desarrollo:
   

   npm run dev
   

   que mostrará:
   

   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h   enter to show help    
   

   Haga clic en la URL local con la tecla CTRL para iniciar el navegador.
   Verá que el Visor de PDF se muestra en la página.

Documentación

• Documentos API HTML
• Documentos de la API de Markdown
• Base de conocimientos

Demostraciones en vivo

• Prueba de paquete de módulos
• Prueba del paquete de scripts

Campo de golf:

• GitHub
• MNP