PDFs einfach in Ihre Website einbetten mit PDF Embed API

Es ist erstaunlich, wie viele Informationen wir heute im PDF-Format gespeichert haben. Laut der PDF Association werden jedes Jahr etwa 2,5 Billionen PDFs erstellt, was 6 Prozent des Webs ausmacht. Als Webentwickler können PDFs auf einer Website jedoch eine Reihe von Herausforderungen mit sich bringen:

Das Anzeigeerlebnis variiert stark zwischen verschiedenen Benutzern und Geräten, da sie von einem PDF-Viewer abhängig sind. Ob in Webbrowsern eingebettet oder in kostenlosen Online-Bibliotheken, einige Viewer sind besser als andere. Adobe Acrobat Reader ist in der Regel der universelle Standard für die korrekte Anzeige von PDFs.
Schwierig wird es für mich, wenn ich PDFs in den Rest meiner Website einbinden möchte. Meistens würden PDFs die Benutzer dazu auffordern, die PDFs auf ihren Geräten herunterzuladen.
PDFs in HTML zu konvertieren ist schwierig und unzuverlässig. Wenn ich Inhalte innerhalb einer Webseite präsentieren möchte, die im PDF-Format vorliegen, muss ich sie oft in PDF umwandeln, um sie leichter einbetten zu können.
Ich habe keinen Einblick in die Art und Weise, wie meine Besucher diese PDFs betrachten. Das bedeutet, dass ich keine Ahnung habe, ob jemand bestimmte Seiten liest, wie lange er auf diesen Seiten verweilt usw.

Glücklicherweise hat Adobe die Adobe PDF Embed API (PDF Embed) veröffentlicht, eine einfache Möglichkeit für Sie, ein PDF direkt in Ihre Website mit einem einfachen Codeschnipsel einzubinden. Die Anwendung ist völlig kostenlos und wird clientseitig innerhalb Ihrer Web-Applikation gerendert. Sie müssen keine ausgefeilte PDF-Bibliothek erlernen, und es ist super einfach zu machen. Es werden keine Daten auf Adobe-Servern gerendert. Tatsächlich können Sie hier sogar lernen, wie man damit spielt.

NICHTS! Das ist das Tollste an der Sache. Sie brauchen nichts anderes als eine Webseite, um PDF Embed zu nutzen.

Demoseite zum Ausprobieren der PDF Embed API

Die PDF Embed Demo-Seite ermöglicht es Ihnen, den Viewer anzupassen und dann einen Einbettungscode zu generieren.

Der einfachste Weg, sich mit PDF Embed vertraut zu machen, ist, es auf der Demo-Site auszuprobieren. Es ist eine einfache Ressource für den Einstieg, denn sie erlaubt Ihnen:

Sehen Sie in Echtzeit die verschiedenen Einbettungsmodi, die für Ihre PDFs zur Verfügung stehen.
Anpassen, welche Funktionen Sie als Teil des Viewers haben möchten, wie z.B. Anmerkungswerkzeuge, PDF herunterladen, PDF drucken, Seitensteuerungen, etc.
Generiert Code, den Sie direkt in Ihre Website einfügen können.

Erhalten Sie Ihre Client-ID

Wenn Sie die PDF-Einbettung in Ihrem eigenen Code ausprobieren möchten, funktioniert sie ohne Client-ID, wenn Sie sie lokal verwenden. Wenn Sie es jedoch tatsächlich in Ihre Website einbinden wollen, benötigen Sie eine Client-ID. Ihre Client-ID erhalten Sie hier.

Die Einstellung Ihrer Anwendungsdomäne ist wichtig. Wenn die PDF-Einbettung geladen wird, prüft sie, ob der Viewer aus dieser Domäne geladen wird.

Hier sind ein paar wichtige Tipps:

Um eine Client-ID zu erstellen, benötigen Sie eine Adobe-ID. Wenn Sie keine haben, können Sie sich hier mit einer E-Mail-Adresse, Google-, Facebook- oder Apple-ID anmelden.
Sie müssen Ihre Anwendungsdomäne festlegen, damit dies funktioniert.

Nachdem Sie Ihre Client-ID erstellt haben, müssen Sie diese kopieren und in Ihrem Code verwenden.

Ihre Client ID befindet sich hier innerhalb von Adobe IO.

Hinweis: Während Sie Ihre Konfigurationen in der Adobe.io-Konsole bearbeiten können, müssen Sie den Link zur Erstellung Ihres Schlüssels aufrufen. Wenn Sie Ihren Schlüssel aus der Adobe.io Console heraus erstellen, haben Sie nicht die Möglichkeit, Ihre Domain festzulegen.

Auswahl des Einbettungsmodus

Eine der Stärken von PDF Embed ist, dass Sie verschiedene Einbettungsmodi zur Auswahl haben:

Full Window

Mit dem Anzeigemodus „Volles Fenster“ können Sie eine PDF-Anzeige ähnlich wie im Adobe Acrobat Reader in Ihrer Website erstellen.

Mit dem Anzeigemodus „Volles Fenster“ können Sie ein Anzeigeerlebnis ähnlich dem Adobe Acrobat Reader auf Ihrem Computer erzeugen und in Ihre Website einbetten. Ich finde dies ideal, wenn ich lange Dokumente betrachte oder wenn ich eine vertraute PDF-Ansicht in meiner Benutzeroberfläche haben möchte.

Große Container

Sized Container ist eine gute Option, wenn Sie Inhalte wie Folien in Ihre Website einbetten möchten.

Große Container eignen sich hervorragend für Inhalte wie PowerPoint-Präsentationen, die in PDF konvertiert wurden, oder eine Reihe von Anleitungen. Weniger ideal finde ich es, wenn Sie lange PDFs einbinden.

Heading