Heim > Artikel > Web-Frontend > So passen Sie PDF.js an

So passen Sie PDF.js an

Linda HamiltonOriginal: 2024-10-20 06:24:29833Durchsuche

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

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

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

Wählen Sie die Einstellungen:

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

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

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>

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

Modulpaket-Test
Skript-Bundle-Test

Links:

GitHub
NPM

Das obige ist der detaillierte Inhalt vonSo passen Sie PDF.js an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html es6 npm angular if for Directory using public JS default constructor this github ui bug iframe

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beherrschen der veralteten Methode „addRoutes“ in Vue Router .rojectNächster Artikel：Beherrschen der veralteten Methode „addRoutes“ in Vue Router .roject

In Verbindung stehende Artikel

Mehr sehen