Open-Source-JavaScript-PDF-Viewer-Bibliothek

Was ist PDFObject?

PDFObject ist eine kostenlose Open-Source-JavaScript-Bibliothek, die zum Einbetten von PDF-Dokumenten in Webseiten entwickelt wurde. Es funktioniert, indem es ein HTML-Einbettungselement generiert und es dann in die HTML-Struktur integriert. Das Embed-Element rendert dann das PDF-Dokument. PDFObject ist selbst kein Renderer; Vielmehr liegt der Schwerpunkt auf der Erstellung des Einbettungselements und seiner Platzierung im HTML. Es kann Einbettungselemente für die Anzeige von PDFs in voller Größe oder innerhalb bestimmter Abschnitte der Webseite erstellen.

Im Folgenden sind einige der Hauptfunktionen von PDFObject aufgeführt:

• Fallback-Mechanismus: PDFObject verfügt über einen Fallback-Mechanismus. In Fällen, in denen ein Browser das Einbetten von PDFs nicht unterstützt, aktiviert PDFObject automatisch die Fallback-Logik, sodass Entwickler bei Bedarf entweder einen Link zum PDF oder eine andere alternative Logik bereitstellen können .
• PDF.js-Integration: PDFObject bietet eine optionale Integration mit PDF.js, sodass Entwickler PDFs unabhängig vom Standard-PDF des Browsers einbetten können Zuschauer. Diese Funktion ist nützlich, wenn der Browser das Einbetten von PDF-Dokumenten in HTML nicht unterstützt.
• PDF-Öffnungsparameter: PDFObject unterstützt Adobes proprietäre PDF-Öffnungsparameter, sodass Entwickler Parameter für die PDF-Anzeige angeben können. Dazu gehören Optionen wie der Ansichtsmodus und andere Adobe-spezifische Einstellungen. Alle diese Parameter finden Sie hier.

GitHub-Statistiken

Name:
Sprache:
Sterne:
Gabeln:
Lizenz:
Das Repository wurde zuletzt aktualisiert unter

Erste Schritte mit PDFObject

Wir können die PDFObject-Bibliothek mit dem npm-Modul herunterladen:

npm i pdfobject

Betten Sie PDF mit Browser-Unterstützungsüberprüfung in HTML ein

Mithilfe der PDFObject-Bibliothek können wir ein PDF-Dokument in HTML einbetten. Zunächst prüfen wir, ob der Browser die Einbettung des PDF-Dokuments in HTML mit der Methode supportsPDFs der PDFObject-Bibliothek unterstützt. Wenn es „true“ zurückgibt, was angibt, dass es die PDF-Einbettung in HTML unterstützt, betten wir die PDF-Datei mit der Methode embed("document_name.pdf","#elementid") in den HTML-Code ein. Diese Funktion bettet das PDF in ein bestimmtes Element im HTML ein. Für die PDF-Einbettung in voller Größe erwähnen wir keine Element-ID und rufen die Methode als embed("document_name.pdf") auf. Wenn jedoch „false“ zurückgegeben wird, was darauf hinweist, dass die PDF-Einbettung in HTML nicht unterstützt wird, wechseln wir bei Bedarf zu einer anderen alternativen Logik. Weitere Informationen finden Sie im folgenden Codeausschnitt:

Ausgabe

Die folgende Ausgabe zeigt das im HTML eingebettete PDF-Dokument an:

Erstellen Sie einen Fallback-Mechanismus

Wir können beim Einbetten einer PDF-Datei in eine Webseite mithilfe von PDFObject einen Fallback-Mechanismus einrichten, der aktiviert wird, wenn der Browser das Einbetten von PDF-Dateien in HTML nicht unterstützt. PDFObject verwendet einen Parameter namens fallbackLink, der beim Aufruf der Funktion embed eine alternative Logik enthält. Wenn ein Browser also das Einbetten von PDFs nicht unterstützt, wird der im fallbackLink vorhandene Code im angegebenen div-Element ausgeführt. Weitere Informationen finden Sie im folgenden Codeausschnitt:

Ausgabe

Der Ausgabe-Screenshot zeigt den vom Fallback-Mechanismus angezeigten Inhalt. Der Fallback-Mechanismus wurde aktiviert, als der Browser das Einbetten von PDFs in HTML nicht unterstützte.

Betten Sie PDF mit den PDF-Öffnungsparametern von Adobe ein

Mit der PDFObject-Bibliothek können wir PDFs zusammen mit einigen Öffnungsparametern einbetten. Wir verwenden die Methode PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { Parameter }}), um das PDF-Dokument zusammen mit den Öffnungsparametern in den HTML-Code einzubetten . Diese PDF-Öffnungsparameter umfassen Funktionen wie das Öffnen der PDF-Datei und das Scrollen zu einer bestimmten Seitenzahl. Weitere Informationen finden Sie im folgenden Codeausschnitt:

Ausgabe

Der folgende Screenshot zeigt das im HTML eingebettete PDF-Dokument mit zusätzlichen Parametern, die das Einbettungselement nach dem Rendern zur Seite Nummer 3 scrollen lassen:

Betten Sie PDF ein, indem Sie PDF.js integrieren

Wie wir wissen, ist PDFObject auf die Unterstützung des Browsers zum Einbetten von PDFs in HTML angewiesen, bietet jedoch eine alternative Methode zum Rendern von PDFs, wenn der Browser dies nicht unterstützt. Die alternative Methode besteht darin, PDF.js in PDFObject zu integrieren. Dazu müssen wir PDF.js auf unserem Server einrichten und dann ForcePDFJS: true und PDFJS_URL: path/to/viewer.html/in/pdf übergeben .js-Parameter für die Funktion embed.

Hinweis: Im folgenden Beispiel-Codeausschnitt haben wir einen Server erstellt und initiiert, der die PDF.js-Bibliothek enthält, sodass http://localhost:8888 auf die PDF.js-Bibliothek verweist.

Ausgabe

Der folgende Screenshot zeigt das gerenderte PDF-Dokument durch die Integration von PDFObject mit PDF.js:

Abschluss

Zusammenfassend lässt sich sagen, dass PDFObject eine benutzerfreundliche JavaScript-Bibliothek zum Einbetten von PDF-Dokumenten in HTML ist. Obwohl sie nicht als Renderer fungiert und auf die Unterstützung des Browsers für Einbettungselemente angewiesen ist, was zu Problemen wie einer fehlerhaften Benutzeroberfläche in Browsern führen kann, die Einbettungselemente nicht unterstützen, verfügt die Bibliothek über Funktionen zur Lösung solcher Probleme durch ihre Unterstützungserkennung Einbettungselement und Fallback-Mechanismus. Wir können PDFs auch in Browsern rendern, die keine eingebetteten Elemente unterstützen, indem wir PDF.js in das PDFObject integrieren. Trotz seiner Einschränkungen ist PDFObject ein wertvolles Werkzeug zum Einbetten und Rendern von PDF-Dokumenten in Webseiten.

Ähnliche Produkte