Open Source JavaScript PDF Viewer-Bibliothek

Was ist PDFObject?

PDFObject ist eine kostenlose und quelloffene JavaScript-Bibliothek, die zum Einbetten von PDF-Dokumenten in Webseiten entwickelt wurde. Sie funktioniert, indem sie ein eingebettetes HTML-Element generiert und es dann in die HTML-Struktur integriert. Das eingebettete Element rendert dann das PDF-Dokument. PDFObject ist selbst kein Renderer; es konzentriert sich vielmehr auf das Erstellen des eingebetteten Elements und dessen Platzierung im HTML. Es kann eingebettete Elemente zum Anzeigen von PDFs in voller Größe oder in bestimmten Abschnitten der Webseite erstellen.

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

• Fallback-Mechanismus: PDFObject verfügt über einen Fallback-Mechanismus. Wenn ein Browser das Einbetten von PDFs nicht unterstützt, aktiviert PDFObject automatisch die Fallback-Logik. So können Entwickler je nach Bedarf entweder einen Link zum PDF oder eine andere alternative Logik bereitstellen.
• PDF.js-Integration: PDFObject bietet optionale Integration mit PDF.js, sodass Entwickler PDFs unabhängig vom Standard-PDF-Viewer des Browsers einbetten können. Diese Funktion ist nützlich, wenn der Browser das Einbetten von PDF-Dokumenten in HTML nicht unterstützt.
• PDF Open Parameters: PDFObject unterstützt Adobes proprietäre PDF Open Parameters, mit denen 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 in HTML ein, mit Überprüfung der Browserunterstützung

Wir können ein PDF-Dokument mithilfe der PDFObject-Bibliothek in HTML einbetten. Zunächst prüfen wir, ob der Browser das Einbetten des PDF-Dokuments in HTML mithilfe der Methode supportsPDFs der PDFObject-Bibliothek unterstützt. Wenn sie true zurückgibt, was bedeutet, dass das Einbetten von PDFs in HTML unterstützt wird, betten wir das PDF mithilfe der Methode embed("document_name.pdf","#elementid") in HTML ein. Diese Funktion bettet das PDF in ein bestimmtes Element in HTML ein. Für das Einbetten von PDFs in voller Größe geben wir keine Element-ID an und rufen die Methode als embed("document_name.pdf") auf. Wenn sie jedoch false zurückgibt, was bedeutet, dass das Einbetten von PDFs in HTML nicht unterstützt wird, wechseln wir bei Bedarf zu einer anderen alternativen Logik. Weitere Einzelheiten finden Sie im folgenden Codeausschnitt:

Ausgabe

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

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 Aufrufen der embed-Funktion eine alternative Logik enthält. Wenn ein Browser also das Einbetten von PDF-Dateien nicht unterstützt, wird der im fallbackLink vorhandene Code im angegebenen div-Element ausgeführt. Weitere Einzelheiten finden Sie im folgenden Codeausschnitt:

Ausgabe

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

PDF mit den PDF Open-Parametern von Adobe einbetten

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

Ausgabe

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

PDF einbetten durch Integration von PDF.js

Wie wir wissen, ist PDFObject auf die Unterstützung des Browsers angewiesen, um PDFs in HTML einzubetten, bietet aber 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 die Parameter ForcePDFJS: true und PDFJS_URL: path/to/viewer.html/in/pdf.js an die Funktion embed übergeben.

Hinweis: Im folgenden Beispielcodeausschnitt 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 einfach zu verwendende JavaScript-Bibliothek zum Einbetten von PDF-Dokumenten in HTML ist. Es fungiert zwar nicht als Renderer und ist auf die Unterstützung des Browsers für eingebettete Elemente angewiesen, was zu Problemen wie einer defekten Benutzeroberfläche in Browsern führen kann, die eingebettete Elemente nicht unterstützen. Die Bibliothek verfügt jedoch über Funktionen zur Lösung solcher Probleme durch die Unterstützung der Erkennung eingebetteter Elemente und des Fallback-Mechanismus. Wir können PDFs auch in Browsern rendern, die eingebettete Elemente nicht unterstützen, indem wir PDF.js mit PDFObject integrieren. Trotz seiner Einschränkungen ist PDFObject ein wertvolles Tool zum Einbetten und Rendern von PDF-Dokumenten in Webseiten.

Ähnliche Produkte