So passen Sie PDF.js an
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
Nach dem Login kopierenWä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 kopierenwas zeigt:
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
Nach dem Login kopierenKlicken 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt?
Apr 04, 2025 pm 05:09 PM
Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...
Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe?
Apr 04, 2025 pm 05:12 PM
Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
