PDFs mit der Adobe PDF Embed API im Griff

Nach unserer letzten Schätzung gibt es inzwischen mehr PDFs auf der Welt als Atome im Universum (nicht von externen Quellen verifiziert), daher ist es wahrscheinlich, dass Sie ab und zu auf ein PDF-Dokument stoßen. Browser gehen recht gut mit PDFs um. Normalerweise öffnet das Klicken auf einen Link zu einer PDF-Datei einen neuen Tab in Ihrem Browser mit einer browserabhängigen Benutzeroberfläche und Darstellung. Hier ist dieselbe PDF, geöffnet in Edge, Chrome, Firefox und Safari, nacheinander.

Wie erwartet, hat jeder Browser seinen eigenen Stil, aber eines ist konstant – alle beanspruchen den gesamten Viewport, um die PDF-Datei anzuzeigen. Während dies nützlich ist, um dem Leser so viel Platz wie möglich zum Betrachten der PDF-Datei zu geben, wäre es manchmal wünschenswert, mehr Kontrolle über das PDF-Erlebnis zu haben. Hier kommt die Adobe PDF Embed API ins Spiel. Die PDF Embed API ist eine kostenlose JavaScript-Bibliothek, mit der Sie PDFs inline mit dem Rest Ihrer Inhalte anzeigen können, und Ihnen die Kontrolle über die Werkzeuge-UI gibt, Anmerkungen und Ereignisse unterstützt und vieles mehr. Lassen Sie uns einige Beispiele durchgehen, wie die Arbeit mit der Bibliothek aussieht.

Einen Schlüssel erhalten

Bevor wir beginnen, müssen Sie einen Schlüssel registrieren. Wenn Sie auf unsere Seite Erste Schritte gehen, sehen Sie einen Link, über den Sie neue Anmeldeinformationen erstellen können.

Wenn Sie noch kein Konto bei Adobe haben, müssen Sie eines erstellen. Sie werden aufgefordert, den Anmeldeinformationen einen Namen und eine Anwendungsdomäne zu geben. Der Name ist zwar nicht besonders wichtig, die Anwendungsdomäne aber schon. Der erhaltene Schlüssel wird auf eine bestimmte Domäne beschränkt sein. Sie können hier nur eine Domäne eingeben. Für den Anfang können Sie also localhost verwenden oder cdpn.io als Domäne angeben, wenn Sie es auf CodePen ausprobieren möchten. Wenn Sie die API sowohl in lokalen als auch in Produktionsumgebungen verwenden möchten, können Sie mehrere Projekte in der Konsole erstellen oder HOSTS-Datei-Konfigurationen verwenden. (Die Möglichkeit, mehrere Domänen für Anmeldeinformationen anzugeben, ist in Planung.)

Klicken Sie auf den schönen blauen Button "Anmeldeinformationen erstellen" und Sie erhalten Ihren Schlüssel.

Wenn Sie neugierig sind und sofort sehen möchten, was die Embed API leisten kann, klicken Sie auf "Code-Beispiele abrufen", was Sie zu einer interaktiven Online-Demo führt. Aber da wir harte Coder sind, die unsere eigenen Editoren bauen, bevor wir zur Arbeit gehen, tauchen wir direkt in ein einfaches Beispiel ein.

Eine Demo erstellen

Zuerst erstellen wir eine HTML-Seite, die unsere PDF-Datei hostet. Ich bin seit zwanzig Jahren Webentwickler und bin jetzt Experte für die Gestaltung schöner HTML-Seiten. Hier ist, was ich mir ausgedacht habe.

<html>
  <head></head>
  <body>
    <h1>Cats are Everything</h1>
    <p>
      Cats are so incredibly awesome that I feel like
      we should talk about them more. Here's a PDF
      that talks about how awesome cats are.
    </p>
		
    <!-- PDF here! -->

    <p>
      Did you like that? Was it awesome? I think it was awesome! 
    </p>
  </body>
</html>

Ich habe natürlich auch etwas CSS hinzugefügt.

A heading one that says Cats are Everything, followed by two short paragraphs about cats. The text is white against a green background.

Ich weiß ehrlich gesagt nicht, warum Adobe mich als Developer Evangelist eingestellt hat, denn offensichtlich sollte ich im Designteam sein. Wie bekommen wir unsere PDF-Datei dort hinein? Der erste Schritt ist, unser Bibliotheks-SDK hinzuzufügen.

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

Jetzt brauchen wir etwas JavaScript. Wenn unsere Bibliothek geladen wird, feuert sie ein Ereignis namens adobe_dc_view_sdk.ready. Je nachdem, wie Sie Ihre Skripte laden und welches Framework Sie wählen, ist es möglich, dass das Ereignis ausgelöst wird, bevor Sie überhaupt die Möglichkeit haben, es zu überprüfen.

Wir können auch die Existenz von window.AdobeDC überprüfen. Beides können wir behandeln, indem wir zu einer Funktion verketten, die unsere PDF-Datei einrichtet.

if (window.AdobeDC) displayPDF();
else {
  document.addEventListener("adobe_dc_view_sdk.ready", () => displayPDF());
}

function displayPDF() {
  console.log('Lets do some AWESOME PDF stuff!');
}

Okay, wie zeigen wir die PDF-Datei an? Um alle Standardeinstellungen zu übernehmen, können wir den folgenden Schnipsel verwenden.

let adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY, divId: "mypdf" });
adobeDCView.previewFile({
  content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
  metaData:{fileName: "cat.pdf"}
});

Lassen Sie uns das aufschlüsseln. Zuerst erstellen wir ein neues AdobeDC.View-Objekt. Der Wert clientId ist der Schlüssel von früher. divId ist die ID eines <div> im DOM, in dem die PDF-Datei gerendert wird. Ich habe den früheren HTML-Kommentar entfernt und ein leeres <div> mit dieser ID eingefügt. Ich habe auch etwas CSS verwendet, um eine Breite und Höhe dafür anzugeben.

#mypdf {
  width: 100%;
  height: 500px;
}

Die Methode previewFile nimmt zwei Hauptargumente. Das erste ist die PDF-URL. Die PDF Embed API funktioniert sowohl mit URLs als auch mit File Promises. Für URLs möchten wir sicherstellen, dass CORS korrekt eingerichtet ist. Der zweite Wert sind Metadaten über die PDF-Datei, in diesem Fall der Dateiname. Hier ist das Ergebnis:

Hier ist ein vollständiger CodePen des Beispiels, und ja, Sie können diesen klonen, ändern und den Schlüssel weiterhin verwenden.

Sie werden feststellen, dass die Benutzeroberfläche dieselben Werkzeuge enthält, die Sie von jedem PDF-Viewer erwarten, zusammen mit Dingen wie der Möglichkeit, Notizen und Anmerkungen hinzuzufügen.

Beachten Sie das Symbol "Speichern" in der obigen Abbildung. Beim Herunterladen enthält die PDF-Datei die Kommentare und die schönen Zeichenzeichnungen.

Anpassen der Erfahrung

Nun, Sie haben das grundlegende Beispiel gesehen, also wollen wir es etwas aufpeppen und die Erfahrung anpassen. Eine der ersten Möglichkeiten, dies zu tun, ist die Änderung des Einbettungsmodus, der steuert, wie die PDF-Datei angezeigt wird. Die Bibliothek unterstützt vier verschiedene Modi.

Größencontainer – Der Standardmodus zum Rendern einer PDF-Datei in einem <div>-Container. Er rendert jeweils eine Seite.
Vollständiges Fenster – Ähnlich wie Sized Container, da es sein übergeordnetes <div> "füllt", aber die gesamte PDF-Datei in einem "Stream" anzeigt, durch den Sie scrollen können.
Inline – Zeigt die PDF-Datei wie Sized Container in einer Webseite an, rendert aber jede Seite in einem vertikalen Stapel. Offensichtlich sollten Sie dies nicht mit einer großen 99-seitigen PDF-Datei verwenden, es sei denn, Sie hassen Ihre Benutzer. (Aber wenn Sie bereits eines dieser "Melden Sie sich für unseren Newsletter an"-Modalfenster anzeigen, wenn jemand Ihre Website besucht, oder wenn Ihre Website Videos automatisch abspielt, dann tun Sie das ruhig.)
Lightbox – Zeigt die PDF-Datei in einem zentrierten Fenster an, während der Rest des Inhalts ausgegraut wird. Die Benutzeroberfläche zum Schließen der Anzeige ist automatisch enthalten.

Um eine andere Ansicht anzugeben, kann ein zweites Argument mit Optionen übergeben werden. Zum Beispiel:

function displayPDF() {
  console.log('Lets do some AWESOME PDF stuff!');
  let adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY, divId: "mypdf" });
  adobeDCView.previewFile({
    content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
    metaData:{fileName: "cat.pdf"}
  }, 
  {
    embedMode: "IN_LINE"
  });	
}

Beachten Sie, dass im Inline-Modus die für Ihr Div angegebene Höhe ignoriert wird, damit die PDF-Datei etwas "Platz" hat. Sie können diese Version der Demo hier einsehen: https://codepen.io/cfjedimaster/pen/OJpJRKr

Betrachten wir ein weiteres Beispiel – die Verwendung von Lightbox zusammen mit einem Button ermöglicht es uns, dem Benutzer die Möglichkeit zu geben, die PDF-Datei zu laden, wenn er möchte. Wir können unser HTML wie folgt ändern:

<html>
  <head></head>
  <body>
    <h1>Cats are Everything</h1>
    <p>
      Cats are so incredibly awesome that I feel like
      we should talk about them more. Here's a PDF
      that talks about how awesome cats are.
    </p>
		
    <!-- PDF here! -->
    <button id="showPDF" disabled>Show PDF</button>

    <p>
      Did you like that? Was it awesome? I think it was awesome! 
    </p>
  </body>
</html>

Ich habe einen deaktivierten Button zum HTML hinzugefügt und das leere <div> entfernt. Wir werden es nicht brauchen, da der Lightbox-Modus eine Modalansicht verwendet. Jetzt ändern wir das JavaScript.

const ADOBE_KEY = 'b9151e8d6a0b4d798e0f8d7950efea91';

if(window.AdobeDC) enablePDF();
else {
  document.addEventListener("adobe_dc_view_sdk.ready", () => enablePDF());
}

function enablePDF() {
  let btn = document.querySelector('#showPDF');
  btn.addEventListener('click', () => displayPDF());
  btn.disabled = false;
}

function displayPDF() {
  console.log('Lets do some AWESOME PDF stuff!');
  let adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY });
  adobeDCView.previewFile({
    content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
    metaData:{fileName: "cat.pdf"}
  }, 
  {
    embedMode: "LIGHT_BOX"
  });	
}

Hier gibt es zwei Hauptänderungen. Erstens wird beim Überprüfen, ob die Bibliothek geladen wird (oder geladen wurde), enablePDF ausgeführt, was die Eigenschaft "deaktiviert" vom Button entfernt und ein Klickereignis hinzufügt. Dies führt displayPDF aus. Beachten Sie, dass der Initialisierer divId nicht mehr verwendet. Zweitens beachten Sie die Änderung des embedMode. Sie können dies selbst über den untenstehenden Pen ausprobieren.

Sie haben auch weitere Anpassungsoptionen, einschließlich der Anpassung der UI-Menüs und Icons, um verschiedene Funktionen zu aktivieren und zu deaktivieren.

adobeDCView.previewFile({
	content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
	metaData:{fileName: "cat.pdf"}
}, 
{
	showDownloadPDF: false,
	showPrintPDF: false,
	showAnnotationTools: false,
	showLeftHandPanel: false
});

Sie können wahrscheinlich erraten, was dies tut, aber hier ist eine Aufnahme mit den Standardoptionen.

Und hier ist, wie es mit diesen deaktivierten Optionen aussieht.

Übrigens, nur damit wir uns klar sind, wir wissen definitiv, dass das Deaktivieren des Download-Buttons die hier gesehene PDF-Datei nicht "schützt", die URL ist immer noch über "Quelltext anzeigen" sichtbar.

Auch dies ist nur ein kleines Beispiel, also schauen Sie sich unbedingt die Anpassungsdokumente für weitere Beispiele an.

Arbeiten mit der API und Behandeln von Ereignissen

Neben der Anpassung der Benutzeroberfläche erhalten wir auch eine detaillierte Kontrolle über das Erlebnis nach dem Laden. Dies wird durch eine API unterstützt, die Informationen über die PDF-Datei zurückgeben kann, sowie die Möglichkeit, auf Ereignisse zu hören.

Die Arbeit mit der API nutzt das Ergebnis der Methode previewFile. Das haben wir noch nicht verwendet, aber sie gibt ein Promise zurück. Eine Anwendung der API ist das Abrufen von Metadaten. Hier ist ein Beispiel:

let resultPromise = adobeDCView.previewFile({
  content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
  metaData:{fileName: "cat.pdf"}
}, { embedMode:"SIZED_CONTAINER" });	

resultPromise.then(adobeViewer => {
  adobeViewer.getAPIs().then(apis => {
    apis.getPDFMetadata()
    .then(result => console.log(result))
    .catch(error => console.log(error));
  });
});

Dies gibt Folgendes zurück:

{
  'numPages':6,
  'pdfTitle':'Microsoft Word - Document1',
  'fileName':''
}

Neben API-Aufrufen haben wir auch eine tiefe Integration mit Analysetools. Während die Dokumentation ins Detail geht (und über die Integration mit Adobe Analytics spricht), können Sie PDF-Anzeige- und Interaktionsereignisse auf jede für Sie sinnvolle Weise behandeln.

Da wir zum Beispiel wissen, wie viele Seiten eine PDF-Datei hat, und wir auf Ereignisse wie das Anzeigen einer Seite hören können, können wir feststellen, wann eine Person jede Seite angesehen hat. Um dies zu erstellen, habe ich das JavaScript wie folgt modifiziert:

const ADOBE_KEY = 'b9151e8d6a0b4d798e0f8d7950efea91';

//used to track what we've read
const pagesRead = new Set([1]);
let totalPages, adobeDCView, shownAlert=false;

if(window.AdobeDC) displayPDF();
else {
  document.addEventListener("adobe_dc_view_sdk.ready", () => displayPDF());
}

function displayPDF() {
  console.log('Lets do some AWESOME PDF stuff!');
  adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY, divId: "mypdf" });
	
  let resultPromise = adobeDCView.previewFile({
    content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
    metaData:{fileName: "cat.pdf"}
  }, { embedMode:"SIZED_CONTAINER" });	

  resultPromise.then(adobeViewer => {
    adobeViewer.getAPIs().then(apis => {
      apis.getPDFMetadata()
      .then(result => {
        totalPages = result.numPages;
        console.log('totalPages', totalPages);
        listenForReads();
      })
      .catch(error => console.log(error));
    });
  });
	
}

function listenForReads() {
	
  const eventOptions = {
    enablePDFAnalytics: true
  }

  adobeDCView.registerCallback(
  AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
  function(event) {
    let page = event.data.pageNumber;
    pagesRead.add(page);
    console.log(`view page ${page}`);
    if(pagesRead.size === totalPages && !shownAlert) {
      alert('You read it all!');
      shownAlert = true;
    }
  }, eventOptions
);

}

Beachten Sie, dass ich, nachdem ich Informationen über die Seitenanzahl erhalten habe, eine Funktion ausführe, die beginnt, auf Seitenanzeigeereignisse zu lauschen. Ich verwende ein Set, um jede eindeutige Seite aufzuzeichnen, und wenn die Gesamtzahl der Anzahl der Seiten in der PDF-Datei entspricht, zeige ich eine Meldung mit alert an. (Natürlich wissen wir nicht, ob der Leser den Text *tatsächlich* gelesen hat.) Obwohl zugegebenermaßen etwas lahm, können Sie dies hier selbst ausprobieren.

const ADOBE_KEY = 'b9151e8d6a0b4d798e0f8d7950efea91';

//used to track what we've read
const pagesRead = new Set([1]);
let totalPages, adobeDCView, shownAlert=false;

if(window.AdobeDC) displayPDF();
else {
  document.addEventListener("adobe_dc_view_sdk.ready", () => displayPDF());
}

function displayPDF() {
  console.log('Lets do some AWESOME PDF stuff!');
  adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY, divId: "mypdf" });
	
  let resultPromise = adobeDCView.previewFile({
    content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
    metaData:{fileName: "cat.pdf"}
  }, { embedMode:"SIZED_CONTAINER" });	

  resultPromise.then(adobeViewer => {
    adobeViewer.getAPIs().then(apis => {
      apis.getPDFMetadata()
      .then(result => {
        totalPages = result.numPages;
        console.log('totalPages', totalPages);
        listenForReads();
      })
      .catch(error => console.log(error));
    });
  });
	
}

function listenForReads() {
	
  const eventOptions = {
    listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.PAGE_VIEW ],
    enablePDFAnalytics: true
  }

  adobeDCView.registerCallback(
    AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
    function(event) {
      /*
       console.log("Type " + event.type);
       console.log("Data " + JSON.stringify(event.data));
      */
      let page = event.data.pageNumber;
      pagesRead.add(page);
      console.log(`view page ${page}`);
      if(pagesRead.size === totalPages && !shownAlert) {
        alert('You read it all!');
        shownAlert = true;
      }
    }, eventOptions
  );

}

Mehr erfahren

Ich hoffe, diese Einführung in die Embed API war nützlich. Hier sind einige Ressourcen, die Ihnen helfen, tiefer einzusteigen:

Beginnen Sie mit dem Durchsuchen der Dokumentation, da sie alle Details hervorragend darstellt.
Wir haben eine Live-Demo, mit der Sie alles in Aktion sehen können und die Ihnen sogar Code generiert.
Wenn Sie Fragen haben oder Unterstützung benötigen, haben wir ein Forum für Fragen und Sie können auch adobe-embed-api auf StackOverflow verwenden.
Wenn Sie auf Serverebene mit PDFs arbeiten müssen, haben wir die Adobe PDF Tools API sowie ein verrückt cooles Adobe Document Generation-Tool, das Ihnen gefallen könnte. Diese sind nicht kostenlos wie die PDF Embed API, aber Sie können sie sechs Monate lang kostenlos testen und sich anmelden, um sie auszuprobieren.

Schließlich sind wir absolut offen für Feedback hierzu. Wenn Sie Vorschläge, Ideen, Fragen oder sonstiges haben, können Sie sich gerne melden!

Jue

# 24. Mai 2021

Hallo. Kann das Jahr mit dem Inhalt direkt (base64) oder nur mit der PDF-URL arbeiten?

Antworten

Raymond Camden

Es kann auch mit File Promises arbeiten, was Ihnen ermöglicht, Code zu schreiben, bei dem ein Benutzer eine PDF-Datei von seinem System auswählen oder sie per Drag & Drop ziehen kann.

Sora2455

Es hat weniger Schnickschnack, aber ich bevorzuge Mozilla's PDF.js selbst (https://mozilla.github.io/pdf.js/)

Tihr

# 17. Juni 2021

Wie würde man nur eine Instanz des Codes einrichten und die URL der anzuzeigenden PDF dynamisch übergeben, so dass man viele auf einer Seite haben könnte?

Raymond Camden

Permalink zu Kommentar# 17. Juni 2021

Sie könnten den URL-Pfad zur PDF-Datei in der Query-Zeichenkette übergeben und diesen dann in Ihrem Code parsen. Ich habe keine Demo zur Hand, aber lassen Sie es mich wissen, wenn Sie eine brauchen, und ich kann schnell etwas aufbauen.

John Crumpton

# 20. Juli 2021

Ich liebe diese Art, PDFs einzubetten. Weiß jemand, wie wir die PDF vor dem Herunterladen durch Betrachten des Quelltextes schützen können?

Raymond Camden

Permalink zu Kommentar# 22. Juli 2021

Sie können "Speichern" und "Drucken" deaktivieren, aber wenn Sie eine Ressource im Internet hosten, ist es fast unmöglich, sie zu "verstecken". Sie könnten eine Anmeldung für Ihre Website verlangen und die PDF-Daten nur an angemeldete Clients streamen (File Promises funktionieren mit der Embed API), aber dann haben Sie sie nur an bekannte Benutzer gebunden.

# 10. August 2021

FYI, "Full Window" und nicht "Sized Container" ist die Standardeinstellung. Entschuldigung!

Adam

# 3. Februar 2022

Ich kann für mein Leben nicht verstehen, warum für eine IN_LINE eingebettete PDF-Datei

focusOnRendering: false

nicht korrekt funktioniert. Die PDF-Datei befindet sich außerhalb des Viewports (sie ist weiter unten auf der Seite), aber sobald sie geladen wird, konzentriert sich die Seite auf die PDF-Datei.

Hallo Adam, ich kann das nicht reproduzieren. Ich habe einen CodePen mit einem Textfeld und einem Div für die PDF erstellt. Die PDF wird erst nach 5 Sekunden geladen. Ich habe in das Feld getippt und einfach gewartet... und als die PDF geladen wurde, hat sie nicht meinen Fokus übernommen.

Wenn Sie mich direkt erreichen möchten, bin ich [email protected].

Einen Schlüssel erhalten

Eine Demo erstellen

Anpassen der Erfahrung

Arbeiten mit der API und Behandeln von Ereignissen

Mehr erfahren

Kommentare

Antwort hinterlassen Antwort abbrechen