In diesem Artikel zeige ich Ihnen, wie Sie PDF-Dateien in Ihrer Simplifier-Anwendung mithilfe der Adobe PDF Embed API anzeigen können.

Warum die Adobe PDF-Einbettungs-API?

Wie Sie vielleicht bereits wissen, können Sie das Simplifier PDF Widget verwenden, um PDF-Dateien in Ihrer Anwendung anzuzeigen.
Dieses Widget ist Teil des Standardinhalts und ist praktisch, wenn Sie die PDF-Datei einfach nur auf einem Bildschirm oder in einem Dialog anzeigen möchten.
Einige Anwendungsfälle erfordern jedoch zusätzliche Funktionen, wie z. B. das Drucken, das Hinzufügen von Kommentaren zur PDF-Datei oder das Lazy-Loading für große PDF-Dateien.
Für diese Fälle ist die Adobe PDF Embed API eine clevere und bequeme Option, da sie sich auch einfach in eine Simplifier-Anwendung integrieren lässt.

Schritt 1: Abrufen eines API-Schlüssels

Um die Adobe PDF Embed API nutzen zu können, benötigen Sie einen eigenen API-Schlüssel.
Das Abrufen eines API-Schlüssels ist kostenlos, aber Sie müssen zuerst ein Konto erstellen.
Erstellen Sie ein Konto für die Adobe Developer Console. Erstellen Sie dann ein neues Projekt.
Fügen Sie Ihrem Projekt eine API hinzu und wählen Sie “PDF Embed API”:

Geben Sie nun die Domäne Ihrer Simplifier-Instanz ein, in der Sie die Adobe PDF-Einbettungs-API verwenden möchten.
Geben Sie nur den Host ein, geben Sie keine Pfade/Ports/etc. ein.
Wenn Ihre Simplifier-Instanz beispielsweise über ‘https://training.simplifier.cloud/UserInterface’ erreichbar ist, geben Sie nur ‘training.simplifier.cloud’ ein:

Das war’s, Sie können jetzt Ihren API-Schlüssel zur späteren Verwendung in die Zwischenablage kopieren.

Schritt 2: Einbetten der PDF-Datei in eine Anwendung

Erstellen der Benutzeroberfläche für die PDF-Datei

Zuerst benötigen wir eine Benutzeroberfläche, in der das PDF angezeigt wird.
Erstellen Sie also in Simplifier entweder eine neue Anwendung oder öffnen Sie eine vorhandene.
Fügen Sie das Widget ‘ui_core_HTML‘ zu dem Bildschirm hinzu, auf dem Sie die PDF-Datei anzeigen möchten.
Mit diesem Widget können Sie jede Art von Standard-HTML einbetten.
Fügen Sie in der Eigenschaft “content” den folgenden HTML-Codeausschnitt ein:

<div id="adobe-dc-view"></div><script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

Mit diesem Code wird der Container für die PDF-Datei zum Bildschirm hinzugefügt und das Adobe PDF Embed SDK geladen, sodass seine Funktionen in Ihrer Anwendung verfügbar sind.

Laden Sie die PDF-Datei in die Anwendungs-Assets hoch

Als nächstes benötigen wir eine PDF-Datei, die in der Anwendung angezeigt wird.
Am einfachsten ist es, die PDF-Datei in die Anwendung hochzuladen.
Wählen Sie dazu im UI Designer den Reiter “Andere” und dann “Assets” aus.
Hier können Sie eine PDF-Datei von Ihrem lokalen System hochladen.
Kopieren Sie den Pfad der Datei für die spätere Verwendung.

Wenn Sie mehrere PDF-Dateien dynamisch anzeigen möchten, ist es nicht möglich, jede PDF-Datei hier im Abschnitt “Elemente” hochzuladen.
Sie können die PDF-Dateien auch einfach per URL aufrufen.
Sie können beispielsweise unser Content Repository Plugin verwenden, um alle Arten von Dateien zu speichern und abzurufen.
In diesem Knowledge Base-Artikel erfahren Sie, wie Sie das Plugin verwenden: So verwenden Sie das Simplifier Content Repository Plugin

Fügen Sie den Code für die PDF-Einbettung hinzu

Nachdem die Benutzeroberfläche fertig ist und eine PDF-Datei verfügbar ist, möchten wir den PDF-Inhalt in das HTML-Widget in unserer Anwendung laden.
Öffnen Sie also den Prozess-Designer. Erstellen Sie eine neue Story oder öffnen Sie eine vorhandene.
Wählen Sie zunächst ein Ereignis aus, das das Laden der PDF-Datei auslösen soll.
Sie können z. B. das OnAfterRendering-Ereignis Ihres Bildschirms verwenden.
Fügen Sie dem Prozessraster eine Ereignisform hinzu, und abonnieren Sie das entsprechende Ereignis.
Verbinden Sie als Nächstes einen Skriptblock mit dem Ereignis-Shape.
Geben Sie innerhalb des Skripts den folgenden Codeausschnitt ein:

var sFileURL = "data/test_multiple_pages.pdf",  // fetch the URL of the PDF
    sFileName = "test_multiple_pages.pdf",
    iPageNumber = 1;

document.addEventListener("adobe_dc_view_sdk.ready", function() {
    var adobeDCView = new AdobeDC.View({
        clientId: "xyz", // your API key for this Simplifier instance
        divId: "adobe-dc-view"  // the ID that we have set in the HTML widget
    });

    var previewFilePromise = adobeDCView.previewFile({
        content: {
            location: {
                url: sFileURL,
            }
        },
        metaData: {
            fileName: sFileName
        }
    });

    previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
            apis.gotoLocation(iPageNumber)
                .then(() => console.log("Success"))
                .catch((error) => console.log(error));
        });
    });
});

Mit diesem Code wird die PDF-Datei nach dem OnAfterRendering-Ereignis geladen und auf dem Bildschirm angezeigt.
Passen Sie die folgenden Elemente an:

• sFileURL: die URL/der Pfad zur PDF-Datei
• sFileName: Der Name der PDF-Datei.
  Wenn Sie das Content Repository Plugin verwenden, können Sie den Dateinamen auch dynamisch abrufen
• iPageNumber: Legen Sie es auf die Seite fest, die Sie ursprünglich anzeigen möchten
• clientID: Geben Sie Ihren eigenen API-Schlüssel ein (in Schritt 1 erstellt)
• divID: Die ID muss mit der ID übereinstimmen, die wir im HTML-Widget angegeben haben

Speichern und implementieren Sie die App, um zu überprüfen, ob Ihre PDF-Datei korrekt angezeigt wird.

Schritt 3: Fügen Sie weitere Funktionen hinzu

Wie bereits zu Beginn dieses Artikels erläutert, bietet die Adobe PDF Embed API viele verschiedene Optionen, die Sie dem Code hinzufügen können.
Stöbern Sie in der Dokumentation von Adobe, um alle verfügbaren Optionen zu erkunden: Adobe PDF Embed API-Dokumentation

Einbettungs-Modi

Legen Sie fest, wie die PDF-Datei auf der Seite angezeigt wird, z. B. ob sie im Vollbildmodus oder in einer Linie mit anderen Textblöcken angezeigt wird.

Anpassen der PDF-Benutzeroberfläche

Passen Sie die Steuerelemente an, die auf der Benutzeroberfläche angezeigt werden.
Sie können beispielsweise die Anmerkungswerkzeuge, die Schaltflächen zum Herunterladen und Drucken der PDF-Datei, die Zoom-Steuerelemente und vieles mehr ein- und ausblenden.
Folgen Sie diesem Link, um alle verfügbaren UI-Optionen anzuzeigen: Adobe PDF Embed API – UI-Anpassung

Schritt 4: Verwenden der Adobe PDF-Einbettungs-API auf dem mobilen Client

Die Adobe PDF-Einbettungs-API funktioniert nur, wenn die Simplifier-App im Browser und nicht im Mobile Client geöffnet wird. Wenn Sie daran interessiert sind, die Adobe PDF Embed API auch im Mobile Client zu verwenden, wenden Sie sich bitte an Ihren Ansprechpartner für Ihren Simplifier-Partner.