Veröffentlichung digitaler Dokumente.

Elektronische Dokumente gibt es überall - tatsächlich gibt es sie wahrscheinlich Billionen PDF global, und diese Zahl steigt täglich. Durch Einbetten des PDF-Viewers in Ihre Webseiten ermöglichen Sie es Anwendern, Dokumente anzuzeigen, ohne dass Sie Ihren HTML oder CSS-Code neu gestalten oder den Zugriff auf Ihre Website behindern müssen.

Sehen wir uns ein beliebtes Szenario an. Ein Unternehmen stellt Whitepaper auf ihrer Website
, um den Kontext für ihre Anwendungen und Services bereitzustellen. Der Marketing-Experte der Website möchte besser verstehen, wie Anwender mit ihren PDF-basierten Inhalten interagieren, und diese in ihre Website und ihr Branding einbinden. Sie haben beschlossen, die Whitepaper als gated content, der steuert, wer sie herunterladen kann.

Lernziel.

In diesem praktischen Tutorial lernen Sie, wie Sie eingebettete PDF-Dokumente in Webseiten anzeigen, indem Sie Adobe PDF Embed-API, das kostenlos und einfach zu bedienen ist. In diesen Beispielen werden einige Formate von JavaScript, Node.js, Express.js, HTML und CSS verwendet. Sie können den vollständigen Projektcode im Fenster " GitHub.

Relevante APIs und Ressourcen

Erstellen einer Knoten-Webanwendung

Als Erstes erstellst du eine Website mit "Node.js" und "Express". Sie enthält eine gut aussehende Vorlage und mehrere PDF zum Herunterladen.

Erstens: Herunterladen und Installieren von Node.js.

Um ein Node.js-Projekt mit einer minimalen Webanwendungsstruktur einfach zu erstellen, installieren Sie das Anwendungsgeneratortool `express-generator`.

npm install express-generator -g

Erstellen Sie als Nächstes die neue Express-App mit dem Namen pdf-app und wählen Sie sie als Ansichts-Engine aus.

express pdf-app --view=ejs

Wechseln Sie nun zum Verzeichnis \pdf-app und installieren Sie alle Projektabhängigkeiten.

cd pdf-app
npm install

Starten Sie dann den lokalen Webserver und führen Sie die Anwendung aus.

npm start

Öffnen Sie die Website unter http://localhost:3000.

Sie haben jetzt eine einfache Website.

Rendern von Whitepaper-Daten

Um Whitepaper auf der Website bereitzustellen, werden die Whitepaper-Daten definiert und auf der Website vorbereitet, damit diese Dokumente angezeigt werden können. Erstellen Sie zunächst einen neuen Ordner \data im Stammverzeichnis des Projekts. Die Informationen zu verfügbaren Whitepapern stammen aus einer neuen Datei mit dem Namen data.json, der im Datenordner abgelegt wird.

Um der Web-Applikation einen schönen, modernen Look zu verleihen, installieren Sie die Bootstrap und Font Awesome Front-End-Bibliotheken.

npm install bootstrap
npm install font-awesome

Öffnen Sie die Datei app.js und fügen Sie diese Verzeichnisse als Quellen für statische Dateien ein, indem Sie sie nach der vorhandenen `express.static` angegeben.

app.use(express.static(path.join(__dirname, '/node_modules/bootstrap/dist')));
app.use(express.static(path.join(__dirname, '/node_modules/font-awesome')));

Wenn Sie die PDF-Dokumente einschließen möchten, erstellen Sie einen Ordner mit dem Namen \pdfs unter dem Ordner \public des Projekts. Anstatt die PDF und die Miniaturansichten selbst zu erstellen, können Sie sie von dieser GitHub-Repository-Ordner in die Ordner \pdfs und \image.

Der Ordner \public\pdfs enthält jetzt die PDF-Dokumente:

Der Ordner \public\images sollte Miniaturansichten der PDF-Dokumente enthalten:

Öffnen Sie nun die Datei \routen\index.js, die die Logik für das Routing der Startseite enthält. Um die Whitepaper-Daten aus der Datei data.json zu verwenden, müssen Sie das Modul Node.js laden, das für den Zugriff auf das Dateisystem und die Interaktion mit diesem verantwortlich ist. Deklarieren Sie dann die fs wie folgt in der ersten Zeile der Datei \route\index.js fest:

const fs = require('fs');

Lesen und analysieren Sie dann die Datei data.json und speichern Sie sie in der Variable papers :

let rawdata = fs.readFileSync('data/data.json');
let papers = JSON.parse(rawdata);

Ändern Sie nun die Zeile, um die Rendermethode für die Indexansicht aufzurufen, und übergeben Sie die Papiersammlung als Modell für die Indexansicht.

res.render('index', { title: 'Embedding PDF', papers: papers });

Um die Sammlung von Whitepapern auf der Homepage zu rendern, öffnen Sie die Datei \views\index.ejs und ersetzen Sie den vorhandenen Code durch den Code aus dem Indexdatei.

NPM-Start erneut ausführen und öffnen http://localhost:3000 , um Ihre Sammlung verfügbarer Whitepaper anzuzeigen.

In den folgenden Abschnitten geht es um die Verbesserung der Website und die Verwendung von PDF Embed-API zum Anzeigen der PDF-Dokumente auf der Webseite. Die PDF Embed-API kann kostenlos verwendet werden. Sie müssen lediglich eine API-Zugangsberechtigung erhalten.

Abrufen einer PDF Embed-API-Zugangsberechtigung

Um eine kostenlose PDF Embed-API-Zugangsberechtigung zu erhalten, besuchen Sie den Erste Schritte , nachdem Sie sich für ein neues Konto angemeldet oder sich bei Ihrem vorhandenen Konto angemeldet haben.

Klicken Neue Anmeldeinformationen erstellen und dann Jetzt loslegen:

An dieser Stelle werden Sie aufgefordert, sich für ein kostenloses Konto zu registrieren, wenn Sie kein Konto haben.

Auswählen PDF Embed-API, geben Sie dann Ihren Anmeldeinformationsnamen und Ihre Anwendungsdomäne ein. Verwenden Sie die localhost Domäne ändern, weil Sie die Web-Anwendung lokal testen.

Klicken Sie auf Anmeldeinformationen erstellen , um auf Ihre PDF-Anmeldedaten zuzugreifen und die Client-ID (API-SCHLÜSSEL) abzurufen.

Erstellen Sie im Projekt "Node.js" im Stammordner der Anwendung eine Datei mit dem Namen .ENV und deklarieren Sie die Umgebungsvariable für Ihre PDF Embed-Client-ID mit dem Wert der API KEY-Anmeldedaten aus dem vorherigen Schritt.

PDF_EMBED_CLIENT_ID=**********************************************

Später verwenden Sie diese Client-ID, um auf die PDF Embed-API zuzugreifen. Installieren Sie das dotenv -Paket, um mithilfe des Codes Node.js auf diese Umgebungsvariable zuzugreifen.

npm install dotenv

Öffnen Sie nun die Datei app.js und fügen Sie die folgende Zeile oben in der Datei hinzu, damit Node.js das dotenv-Modul laden kann:

require('dotenv').config();

Anzeigen von PDF in der Web-App

Verwenden Sie jetzt die PDF Embed-API, um PDF auf der Site anzuzeigen. Live-Ansicht öffnen PDF Embed-API-Demo.

Im linken Bereich können Sie den Einbettungsmodus auswählen, der am besten zu Ihren Website-Anforderungen passt:

Es wird empfohlen, den In-Line-Einbettungsmodus für Whitepaper und den Codegenerator später zu verwenden, um eine PDF in die Anwendung einzubetten.

Erstellen einer Inline-Einbettungsmodusseite

Um einen PDF-Viewer in Ihre Webseite einzubetten und alle Seiten gleichzeitig anzuzeigen, erstellen Sie eine neue Seite mithilfe des Inline-Einbettungsmodus.

Erstellen Sie mit der EJS-Ansichts-Engine eine neue Ansicht in der Datei \views\in-line.ejs.

<! html DOCTYPE >
<html>
<head>
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/css/bootstrap.min.css'/>
<link rel='stylesheet' href='/css/font-awesome.min.css' />
<style type="text/css">
p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
</style>
</head>
<body class="m-0">
<div>
<main>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<h3>
<p class="text-center">Grow your business, establish your brand,<br
/>

Stellt eure Kunden an die erste Stelle.

</p>
</h3>
<div>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br />
eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
</main>
<footer>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<p class="text-center">Bodea Inc. Your trusted partner since 2008</p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>

Ändern Sie dann \views\index.ejs , um eine Schaltfläche zum Öffnen der Inline-Ansicht zu erstellen.

<div class="card-body">
<h5 class="card-title">
<span>
<%= paper.title %>
</span>
</h5>
<p>
<a class="btn btn-sm btn btn-danger" href="/in-line/<%=
paper.id %>">
<span type="button"></span>
<span class="fa fa-file-pdf-o"></span>&nbsp;View Document</button>
</a>
</p>
</div>

Öffnen Sie die Datei app.js und deklarieren Sie einen neuen Router nach der indexRouter-Deklaration:

var indexRouter = require('./routes/index');
var inLineRouter = require('./routes/in-line');

Fügen Sie dann diesen Code nach app.use('/', indexRouter); hinzu, um die Inline-Einbettungsmodusansicht mit ihrem Router zu verknüpfen:

app.use('/', indexRouter);
app.use('/in-line', inLineRouter);

Erstellen Sie nun unter \route eine neue Datei in-line.js, um eine neue Routerlogik zu erstellen. Schließen Sie Express ein, ein Knotenmodul, das ein Backend für Webanwendungen aktiviert.

var express = require('express');
const fs = require('fs');
var router = express.Router();

Erstellen Sie als Nächstes einen Endpunkt, der GET-Anforderungen für eine bestimmte Whitepaper-ID behandelt und die Ansicht "in-line.ejs" rendert.

router.all('/:id', function(req, res, next) {
let rawdata = fs.readFileSync('data/data.json');
let papers = JSON.parse(rawdata);
let paper = papers.filter(p => p.id == parseInt(req.params.id))[0];
res.render('in-line', { title: paper.title, paper: paper });
});
module.exports = router;

Sehen Sie sich noch einmal die Live-Demo , um automatisch PDF Embed-API-Code zu generieren. Klicken Inline im linken Bereich:

Klicken Code generieren , um den HTML-Code anzuzeigen, der zum Anzeigen eines Viewers für die Größe eines Containers-PDF erforderlich ist.

Klicken Code kopieren und fügen Sie den Code in die Datei in-line.ejs ein.

<div>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br />
eiusmod tempor incididunt ut labore et dolore</p>
</div>
<div class="row align-items-center border border-primary">
<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "IN_LINE"});
});
</script>
</div>

Die Dokumentparameter sind jedoch weiterhin hartcodiert. Ersetzen wir sie durch die Syntax der EJS-Klammer (<%= someValue %>), um die Seite entsprechend den Daten des Whitepaper-Modells zu rendern.

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function () {
var adobeDCView = new AdobeDC.View({ clientId: "<%=process.env.PDF_EMBED_CLIENT_ID %>", divId: "adobe-dc-view" });
adobeDCView.previewFile({
content: { location: { url: "<%= paper.pdf %>" } },
metaData: { fileName: "<%= paper.fileName %>" }
}, {
embedMode: "IN_LINE"
});
});
</script>

Führen Sie nun die Anwendung mit dem Befehl npm start aus und öffnen Sie die Website unter http://localhost:3000.

Wähle dann ein Whitepaper aus, und klicke auf Dokument anzeigen , um eine neue Seite mit der eingebetteten In-Line-PDF zu öffnen:

Beachten Sie, dass jetzt die Optionen PDF herunterladen und PDF drucken verfügbar sind.

Sie möchten diese Flags am Backend steuern. Später können Sie Autorisierungskontrollen basierend auf der Benutzeridentität implementieren und den Zugriff gemäß Ihren Geschäftsregeln einschränken. Diese Komplexität ist hier nicht erforderlich. Ändern wir also einfach \routen\in-line.js, um die Eigenschaften authenticated und permissions in das Modellobjekt aufzunehmen.

let authenticated = false;
res.render('in-line', {
title: paper.title,
paper: paper,
authenticated: authenticated,
permissions: {
showDownloadPDF: true,
showPrintPDF: true,
showFullScreen: true
}
});

Ändern Sie dann \views\in-line.ejs, damit Ihre Webseite die Flag-Werte vom Backend rendern kann.

embedMode: "IN_LINE",
showDownloadPDF: <%= permissions.showDownloadPDF %>,
showPrintPDF: <%= permissions.showPrintPDF %>,
showFullScreen: <%= permissions.showFullScreen %>
Now, open the in-line.js route file and modify it to disallow the printing, downloading, and full-screen controls.
permissions: {
showDownloadPDF: false,
showPrintPDF: false,
showFullScreen: false
}

Führen Sie die Anwendung dann erneut aus, um zu sehen, wie sich diese Änderung im PDF-Viewer widerspiegelt.

Erstellen von geschützten Inhalten

Nach dem Endbenutzerszenario möchte der Marketer für die Website des Unternehmens besser verstehen, wie Benutzer mit ihren PDF-basierten Inhalten interagieren, und den Inhalt mit dem Rest ihrer Website und Marke integrieren.

Unser Schwerpunkt liegt auf der Einbettung von PDF, daher erstellen Sie keine Benutzerauthentifizierungsfunktion. Implementieren Sie stattdessen einfach eine einfache, gefälschte Paywall mithilfe eines Webformulars, das einige Benutzerinformationen akzeptiert, und zeigt dann das PDF-Dokument an, sobald der Benutzer das Formular sendet.

Ersetzen Sie die Datei \route\in-line.js durch den folgenden Inhalt, um dem Ansichtsmodell Benutzerinformationen bereitzustellen:

var express = require('express');
const fs = require('fs');
var router = express.Router();
router.all('/:id', function(req, res, next) {
let rawdata = fs.readFileSync('data/data.json');
let papers = JSON.parse(rawdata);
let paper = papers.filter(p => p.id == parseInt(req.params.id))[0];
let authenticated = false;
let user = {};
if (req.body.firstName) {
user = {
firstName: req.body.firstName,
lastName: req.body.lastName,
jobTitle: req.body.jobTitle,
email: req.body.email,
};
authenticated = true;
}
res.render('in-line', {
title: paper.title,
paper: paper,
user: user,
authenticated: authenticated,
permissions: {
showDownloadPDF: false,
showPrintPDF: false,
showFullScreen: false
}
});
});
module.exports = router;

Ersetzen Sie dann den Inhalt \views\in-line.ejs durch den Code unten. Das Benutzerdatenformular oder der PDF-Viewer wird angezeigt, je nachdem, ob es sich um einen authentifizierten Benutzer handelt.

<!DOCTYPE html>
<html>
<head>
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/css/bootstrap.min.css'/>
<link rel='stylesheet' href='/css/font-awesome.min.css' />
<style type="text/css">
p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
</style>
</head>
<body class="m-0">
<% if (authenticated) { %>
<header class="bg-dark text-white">
<div class="text-right mr-4">Hello, <%= user.firstName %> <%= user.lastName%></div>
</header>
<% } %>
<div>
<main>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<h3>
<p class="text-center">Grow your business, establish your brand,<br
/>

Stellt eure Kunden an die erste Stelle.

</p>
</h3>
<div>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br />
eiusmod tempor incididunt ut labore et dolore</p>
</div>
<% if (!authenticated) { %>
<div class="row">
<form method="POST" class="center-panel text offset-md-3 col-md-6 border">
<fieldset class="offset-md-1">
<legend>Submit your info to<br/>access the whitepaper</legend>
<p><input name="firstName" placeholder="first name"/></p>
<p><input name="lastName" placeholder="last name"/></p>
<p><input name="jobTitle" placeholder="job title"/></p>
<p><input name="email" placeholder="email"/></p>
<p><button type="submit" class="btn btn-sm btn btn-primary">Submit</button></p>
</fieldset>
</form>
</div>
<% } %>
<% if (authenticated) { %>
<div class="row align-items-center border border-primary">
<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function () {
var adobeDCView = new AdobeDC.View({ clientId: "<%=process.env.PDF_EMBED_CLIENT_ID %>", divId: "adobe-dc-view" });
adobeDCView.previewFile({
content: { location: { url: "<%= paper.pdf %>" } },
metaData: { fileName: "<%= paper.fileName %>" }
}, {
embedMode: "IN_LINE",
showDownloadPDF: <%= permissions.showDownloadPDF %>,
showPrintPDF: <%= permissions.showPrintPDF %>,
showFullScreen: <%= permissions.showFullScreen %>
});
});
</script>
<% } %>
</div>
</div>
</main>
<footer>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<p class="text-center">Bodea Inc. Your trusted partner since 2008</p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>

Site-Besucher können jetzt nur noch auf PDF zugreifen, nachdem sie ihre Informationen übermittelt haben:

Aktivieren von Ereignissen

Sehen wir uns an, wie Sie PDF Viewer-Ereignisse ganz einfach mit Ihrer Anwendung integrieren können, um Analysedaten für Marketer zu erfassen. Um den Viewer mithilfe der PDF EmbedAPI zu erweitern, fügen Sie die folgenden Codezeilen hinzu, nachdem Sie die adobeDCView-Variable deklariert und bevor Sie die previewFile-Methode aufrufen:

var adobeDCView = new AdobeDC.View({ clientId: "<%=process.env.PDF_EMBED_CLIENT_ID %>", divId: "adobe-dc-view" });
adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
function(event) {
console.log(event);
},
{ enablePDFAnalytics: true }
);

Führen Sie die Anwendung jetzt erneut aus und öffnen Sie die Entwicklertools Ihres Webbrowsers, um die Ereignisdaten anzuzeigen.

Sie können diese Daten an Adobe Analytics oder anderen Analyse-Tools verwenden.

Nächste Schritte

Acrobat Services APIs erleichtern Entwicklern die Bewältigung von Problemen bei der Veröffentlichung digitaler Inhalte mithilfe eines PDF-basierten Workflows. Sie haben gesehen, wie Sie eine Beispiel-Node-Web-App erstellen, um eine Sammlung von Whitepapern anzuzeigen. Dann erwerben Sie eine kostenlose API-Zugangsberechtigung und den eingeschränkten Zugriff auf die Whitepaper erstellt, die in einem von vier Einbettungsmodi.

Wenn Sie diesen Arbeitsablauf kombinieren, können die hypothetischer Marketer Sammeln Sie Kontaktinformationen im Austausch für Whitepaper-Downloads und zeigen Sie Statistiken an, wer mit den PDF interagiert. Sie können diese Funktionen in Ihre Website einbinden, um Benutzerinteraktionen zu fördern und zu überwachen.

Wenn Sie ein Angular- oder React-Entwickler sind, können Sie zusätzliche Stichproben Hier erfahren Sie, wie Sie die PDF Embed-API mit React- und Angular-Projekten integrieren.

Mit Adobe könnt ihr durchgängige Kundenerlebnisse mit innovativen Lösungen entwickeln. Auschecken Adobe PDF Embed-API kostenlos testen. Weitere Möglichkeiten bietet die Adobe PDF Services-API mit pay as you google Glasur.

Erste Schritte mit Adobe Acrobat Services APIs heute.