So passen Sie PDF.js an-js-Tutorial-php.cn

So passen Sie PDF.js an

Linda Hamilton

Freigeben： 2024-10-20 06:24:29

Original

831 Leute haben es durchsucht

How to customize PDF.js

PDF.js ist ein großartiges Open-Source-Projekt, das häufig aktualisiert wird und dem neue Funktionen hinzugefügt werden. Wie auch immer es optisch hässlich ist, oder sagen wir mal, es sieht veraltet aus. Wie wäre es, wenn Sie sich die neuesten PDF-Funktionen und Korrekturen von PDF.js holen, aber auch einen 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

Nach dem Login kopieren

Wenn das Paket installiert (oder die Version aktualisiert) wird, werden von PdfJsKit verwendete Assets (CSS, Bilder usw.) automatisch von node_modulespdfjskitdistpdfjskit nach publicpdfjskit kopiert. Das öffentliche Unterverzeichnis Ihres Projekts ist ein üblicher 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. Sie können diesen Pfad jedoch ä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"));

Nach dem Login kopieren

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:

Erstellen Sie eine Vite-Projektvorlage:

npm create vite@latest

Nach dem Login kopieren

Wählen Sie die Einstellungen:

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

Nach dem Login kopieren

Es wird ein Unterverzeichnis mit Ihrem Projektnamen erstellt. Gehen Sie wie folgt vor:
```
cd pdfjskit-vite-example
npm install
npm install pdfjskit
```
Nach dem Login kopieren

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>PdfJsKit Vite Example</title>
  </head>
  <body>

    <div id="container"></div>

    <script type="module">
      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"));
    </script>

  </body>
</html>

Nach dem Login kopieren

Jetzt können Sie den Entwicklungs-Webserver ausführen:
```
npm run dev
```
Nach dem Login kopieren
was zeigt:
```
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help    
```
Nach dem Login kopieren
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.