PDF.js est un excellent projet open source qui est fréquemment mis à jour et de nouvelles fonctionnalités sont ajoutées, mais en termes d'apparence, il est moche, ou peut-être disons qu'il a l'air obsolète. Que diriez-vous d'obtenir les dernières fonctionnalités et correctifs PDF de PDF.js tout en ayant un aperçu élégant du côté de la présentation ?

La visionneuse PDF de PdfJsKit est discrète, elle ne modifie pas directement le code de PDF.js, elle inclut simplement PDF.js dans une iframe et lors de l'exécution, remplace HTML, JS et CSS pour offrir un look moderne et une meilleure interface utilisateur. structure et convivialité et nouvelles fonctionnalités. De cette façon, nous pouvons toujours mettre à jour facilement PDF.js vers la dernière version et obtenir toutes les corrections de bugs et améliorations.

Les autres visionneuses de PDF basées sur PDF.js ne mettent généralement pas à jour l'apparence par défaut, et celles qui manquent généralement de fonctionnalités en raison de la séparation en composants mais de leur implémentation partielle ou offrent une API mauvaise/partielle.

Commencer

Installez le package sur votre projet :

npm install pdfjskit

Lorsque le package est installé (ou que la version est mise à jour), les actifs (css, images, etc.) utilisés par PdfJsKit seront copiés automatiquement de node_modules\pdfjskit\dist\pdfjskit vers public\pdfjskit. Le sous-répertoire public de votre projet est un emplacement commun pour les ressources Web, mais si votre framework JS a une structure de répertoires différente, vous pouvez déplacer les ressources vers un autre emplacement.

Par défaut, PdfJsKit charge les actifs du sous-répertoire pdfjskit par rapport à la page hôte, mais vous pouvez modifier ce chemin en passant l'option libraryPath personnalisée au constructeur PdfViewer.

Usage

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"));

Notez que le package NPM contient un module ES6 pdfjskit.min.mjs, également une version de script pdfjskit.min.js est fournie dans le répertoire GitHub dist/pdfjskit et dans le package de développement proposé ici.

Utiliser PdfJsKit dans des projets Plain JS avec Vite

Vous pouvez utiliser n'importe quel framework JS (React, Vue, Angular, Svelte, Blazor, etc.) avec PdfJsKit, mais pour plus de simplicité dans cet article, je montrerai son utilisation pour les projets JS simples.

Pour les projets JS simples, je recommande d'utiliser Vite, de cette façon, vous pouvez facilement importer depuis le module dans des fichiers HTML :

1. Créer un modèle de projet Vite :
   

   npm create vite@latest
   

   Choisissez les paramètres :
   

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

2. Un sous-répertoire avec le nom de votre projet sera créé, procédez comme suit :
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. Modifiez index.html et remplacez le contenu par :
   

4. Vous pouvez maintenant exécuter le serveur Web de développement :
   

   npm run dev
   

   qui affichera :
   

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

   Cliquez sur l'URL locale avec la touche CTRL pour lancer le navigateur.
   Vous verrez que PDF Viewer est rendu dans la page.

Documentation

• Documents sur l'API HTML
• Documents de l'API Markdown
• Base de connaissances

Démos en direct

• Test de l'ensemble de modules
• Test du paquet de scripts

Links:

• GitHub
• NPM