Open-Source-JavaScript-PDF-Viewer-Bibliothek
Probieren Sie diese kostenlose und Open-Source-JavaScript-API als PDF-Parser-, Viewer-, Reader- und Renderer-Bibliothek aus.
Was ist PDF.js?
PDF.js ist eine von Mozilla entwickelte Open-Source-PDF-Viewer-Bibliothek auf JavaScript- und HTML5-Basis, die die Anzeige von PDF-Dokumenten (Portable Document Format) im Browser ermöglicht.
PDF.js unterstützt mehrere Funktionen, die unten aufgeführt sind:
- PDFs rendern: Sie können PDF-Dokumente in Webbrowsern öffnen und anzeigen, lesen oder rendern.
- PDFs drucken/speichern: PDF.js ermöglicht auch das Drucken oder Speichern von PDF-Dokumenten über Ihren bevorzugten Webbrowser.
- Präsentationsmodus: Im Präsentationsmodus können Sie PDF-Seiten im Vollbildmodus anzeigen und wie bei einer Präsentationsfolie zu jeder Seite navigieren.
- PDF-Navigation: PDF.js bietet einfachere Navigationssteuerelemente, mit denen Sie zur nächsten oder vorherigen Seite wechseln können. Sie können auch schnell zu einer gewünschten Seite springen, indem Sie die Seitennummer eingeben.
- PDF-Anmerkung: Sie können PDF-Dokumente auch mit Anmerkungen versehen, indem Sie den PDF-Seiten Text, Bilder oder Zeichnungen hinzufügen.
- PDF-Seiten drehen: Mit PDF.js können Sie PDF-Seiten auch im oder gegen den Uhrzeigersinn drehen.
- PDF scrollen: PDF.js bietet nette Steuerelemente zum horizontalen oder vertikalen Scrollen von Seiten usw.
- PDF-Dokumenteigenschaften: Zu guter Letzt können Sie mit dem PDF.js-Viewer auch Eigenschaften von PDF-Dokumenten im Browser anzeigen.
Erste Schritte mit PDF.js
Es gibt drei Möglichkeiten, PDF.js zu erhalten und es in Ihren Webprojekten zu verwenden.
1. Erstellen Sie aus dem Quellcode
Sie können das PDF.js-Repository von GitHub klonen und es nach der Installation von Node.js, gulp und PDF.js-Abhängigkeiten, indem Sie die folgenden Schritte ausführen:
Klonen Sie das Git-Repository von PDF.js auf dem lokalen Computer und wechseln Sie zum Ordner „pdf.js“.
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Installieren Sie Node.js
https://nodejs.org/en/download
Gulp-Paket global installieren
npm install -g gulp-cli
Installieren Sie PDF.js-Abhängigkeiten
npm install
Führen Sie den Gulp-Server aus und öffnen Sie den Viewer im Browser unter http://localhost:8888/web/viewer.html
gulp server
2. Verwenden Sie eine vorgefertigte Distribution
PDF.js bietet auch vorgefertigte Distributionen zusammen mit Quellcode an, den Sie unter PDF.js-Releases auf GitHub finden . Sie können die vorgefertigte PDF.js-Bibliothek herunterladen und mit der Verwendung beginnen.
3. Nutzen Sie die gehostete Bibliothek über CDN
PDF.js wird auch auf kostenlosen CDN-Servern gehostet. Im Folgenden werden einige Links geteilt:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Führen Sie den PDF.js Viewer aus
Nachdem Sie eine vorgefertigte Distributionsbibliothek von GitHub heruntergeladen und extrahiert haben, finden Sie zwei Ordner: build und web. PDF.js-Bibliotheksdateien befinden sich im Ordner build, wobei der Ordner web ein Viewer-Projekt enthält, das viewer.html, viewer.css, viewer.js und zugehörige Dateien enthält. Wenn Sie den viewer.html-Code überprüfen, können Sie sehen, dass er auch auf die pdf.js-Bibliothek aus dem Build-Ordner und andere verwandte CSS- und JS-Dateien verweist.
Lassen Sie uns viewer.html im Browser ausführen, um zu sehen, wie der PDF.js-Viewer aussieht:
PDF-Dokumente rendern/anzeigen
Um ein PDF-Dokument mithilfe der PDF.js-Viewer-Bibliothek einfach im Browser zu rendern oder anzuzeigen, müssen wir die PDF.js-Bibliothek mithilfe des script-Tags in unseren HTML-Dokumentheader einbinden und einen canvas hinzufügen > in den HTML-Text und fügen Sie dann den erforderlichen JavaScript-Code hinzu, um pdfjsLib zu verwenden und Objekte zu versprechen, die das asynchrone Laden und Rendern des PDF-Dokuments verarbeiten.
Der obige Code lädt lediglich ein PDF-Dokument im Browser ohne Benutzeroberfläche oder Steuerelemente wie unten:
Online-Demo
Probieren Sie diese voll funktionsfähige online aus PDF.js Viewer-Demo zum Erkunden aller Funktionen der PDF.js-Bibliothek.
Abschluss
PDF.js ist eine kostenlose Open-Source-JavaScrpit-PDF-Viewer-Bibliothek mit einer starken Community. Es bietet browserübergreifende Unterstützung sowohl für moderne als auch für ältere Browser. Ja, die Benutzererfahrung in älteren Browsern ist möglicherweise nicht die gleiche wie in modernen, aber als kostenlose Bibliothek ist sie immer noch gut. Es ist sicher und anpassbar. Die Funktionen sind begrenzt, aber als PDF-Viewer funktioniert es großartig.
PDF.js bietet nette APIs und Architektur zum Erstellen eines webbasierten PDF-Viewers. Da es zeitaufwändig ist, dem Viewer weitere UI-Steuerelemente hinzuzufügen, um Entwicklern Zeit zu sparen, stellt PDF.js auch den Quellcode eines voll funktionsfähigen und funktionsreichen PDF-Viewers bereit, den Sie finden können (siehe viewer.html, viewer.js und viewer.css usw.) im Ordner web des PDF.js-Bibliotheksverteilungspakets.