PDF.js ist ein großartiges Open-Source-Projekt, das häufig aktualisiert wird und dem neue Funktionen hinzugefügt werden, egal wie hässlich es aussieht, oder sagen wir mal, es sieht veraltet aus. Wie wäre es, wenn Sie die neuesten PDF-Funktionen und Korrekturen von PDF.js erhalten, aber auch einen raffinierten Blick auf die Präsentationsseite werfen würden?

Der PDF-Viewer von PdfJsKit ist unauffällig, er ändert den Code von PDF.js nicht direkt, er bindet lediglich PDF.js in einen Iframe ein und überschreibt zur Laufzeit HTML, JS und CSS, um ein elegantes, modernes Aussehen und eine bessere Benutzeroberfläche zu bieten Struktur und Benutzerfreundlichkeit sowie neue Funktionen. Auf diese Weise können wir PDF.js immer problemlos auf die neueste Version aktualisieren und alle Fehlerkorrekturen und Verbesserungen erhalten.

Andere PDF-Viewer, die auf PDF.js basieren, aktualisieren normalerweise nicht das Standard-Erscheinungsbild, und diejenigen, die normalerweise Funktionalität vermissen, weil sie in Komponenten aufgeteilt sind, diese aber teilweise implementieren, oder eine schlechte/teilweise API bieten.

Erste Schritte

Installieren Sie das Paket in Ihrem Projekt:

npm install pdfjskit

Wenn das Paket installiert (oder die Version aktualisiert) wird, werden von PdfJsKit verwendete Assets (CSS, Bilder usw.) automatisch von node_modules\pdfjskit\dist\pdfjskit nach public\pdfjskit kopiert. Das öffentliche Unterverzeichnis Ihres Projekts ist ein gemeinsamer Ort für Web-Assets. Wenn Ihr JS-Framework jedoch eine andere Verzeichnisstruktur hat, können Sie Assets an einen anderen Ort verschieben.

Standardmäßig lädt PdfJsKit Assets aus dem pdfjskit-Unterverzeichnis relativ zur Hostseite, aber Sie können diesen Pfad ändern, indem Sie die benutzerdefinierte Option „libraryPath“ an den PdfViewer-Konstruktor übergeben.

Verwendung

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

Beachten Sie, dass das NPM-Paket ein ES6-Modul pdfjskit.min.mjs enthält. Außerdem wird eine Skriptversion pdfjskit.min.js im GitHub-Verzeichnis dist/pdfjskit und im hier angebotenen Entwicklerpaket bereitgestellt.

Verwendung von PdfJsKit in einfachen JS-Projekten mit Vite

Sie können jedes JS-Framework (React, Vue, Angular, Svelte, Blazor usw.) mit PdfJsKit verwenden. Der Einfachheit halber werde ich in diesem Beitrag jedoch die Verwendung für einfache JS-Projekte zeigen.

Für einfache JS-Projekte empfehle ich die Verwendung von Vite. Auf diese Weise können Sie problemlos HTML-Dateien aus Modulen importieren:

1. Erstellen Sie eine Vite-Projektvorlage:
   

   npm create vite@latest
   

   Wählen Sie die Einstellungen:
   

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

2. Es wird ein Unterverzeichnis mit Ihrem Projektnamen erstellt. Gehen Sie wie folgt vor:
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. Bearbeiten Sie index.html und ersetzen Sie den Inhalt durch:
   

4. Jetzt können Sie den Entwicklungs-Webserver ausführen:
   

   npm run dev
   

   was zeigt:
   

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

   Klicken Sie mit der STRG-Taste auf die lokale URL, um den Browser zu starten.
   Sie werden sehen, dass der PDF-Viewer auf der Seite gerendert wird.

Dokumentation

• HTML-API-Dokumente
• Markdown-API-Dokumente
• Wissensdatenbank

Live-Demos

• Modul-Bundle-Test
• Skript-Bundle-Test

Links:

• GitHub
• NPM