Pubblicazione di documenti digitali

I documenti elettronici sono ovunque. In effetti, nel mondo ci sono probabilmente trilioni di PDF e questo numero aumenta ogni giorno. Incorporando un visualizzatore di PDF nelle pagine Web, si consente agli utenti di visualizzare i documenti senza riprogettare il HTML e il CSS o senza ostacolare l’accesso al sito Web.

Esploriamo uno scenario popolare. Un'azienda pubblica white paper sul proprio sito Web
per fornire il contesto per le app e i servizi. Il commerciante del sito vuole capire meglio come gli utenti interagiscono con i loro contenuti basati su PDF e incorporarli con la loro pagina Web e marchio. Hanno deciso di pubblicare i white paper come contenuti gestiti, controllando chi può scaricarli.

Cosa puoi imparare

In questo tutorial pratico, scoprite come visualizzare i documenti PDF incorporati nelle pagine Web utilizzando Adobe PDF Embed API, che è gratuito e facile da usare. In questi esempi vengono utilizzati alcuni JavaScript, Node.js, Express.js, HTML e CSS. Puoi visualizzare il codice completo del progetto in GitHub.

API e risorse pertinenti

Creazione di un'app Web nodo

Iniziamo creando un sito utilizzando Node.js ed Express che utilizza un modello di bell'aspetto e offre diversi PDF per il download.

Per prima cosa, scarica e installa Node.js.

Per creare facilmente un progetto Node.js con una struttura minima dell'applicazione Web, installare lo strumento di generazione applicazioni `express-generator`.

npm install express-generator -g

Quindi, crea la nuova app Express denominata pdf-app, scegliendo come motore di visualizzazione.

express pdf-app --view=ejs

Passa ora alla directory \pdf-app e installa tutte le dipendenze del progetto.

cd pdf-app
npm install

Quindi, avviate il server Web locale ed eseguite l'applicazione.

npm start

Aprire il sito Web all'indirizzo http://localhost:3000.

Ora hai un sito Web di base.

Rendering dei dati dei white paper

Per pubblicare i white paper sul sito Web, i dati dei white paper vengono definiti e preparati sul sito Web per visualizzare questi documenti. Creare innanzitutto una nuova cartella \data nella cartella principale del progetto. Le informazioni sui white paper disponibili provengono da un nuovo file denominato data.json, inserito nella cartella dei dati.

Per conferire all'app Web un aspetto elegante, installa le librerie front-end Bootstrap e Font Awesome.

npm install bootstrap
npm install font-awesome

Apri il file app.js e includi queste directory come origini per i file statici, posizionandole dopo la riga `express.static` esistente.

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

Per includere i documenti PDF, creare una cartella denominata \pdfs nella cartella \public del progetto. Anziché creare i PDF e le miniature autonomamente, è possibile copiarli dalla cartella del repository GitHub alle cartelle \pdfs e \image.

La cartella \public\pdfs contiene ora i documenti PDF:

Mentre la cartella \public\images deve contenere le miniature per ciascuno dei documenti PDF:

Aprire ora il file \route\index.js, che contiene la logica per l'instradamento della home page. Per utilizzare i dati del white paper dal file data.json, è necessario caricare il modulo Node.js responsabile dell'accesso e dell'interazione con il file system. Dichiarare quindi la costante fs nella prima riga del file \route\index.js nel modo seguente:

const fs = require('fs');

Quindi, leggi e analizza il file data.json e memorizzalo nella variabile paper:

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

Ora modificare la riga per richiamare il metodo di rendering per la vista indice, passando l’insieme paper come modello per la vista indice.

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

Per eseguire il rendering della raccolta di white paper nella pagina principale, aprire il file \views\index.ejs e sostituire il codice esistente con il codice del file indice del progetto.

Riesegui npm start e apri http://localhost:3000 per visualizzare la raccolta di white paper disponibili.

Nelle sezioni successive verranno illustrati i miglioramenti del sito Web e l'utilizzo dell'API PDF Embed per visualizzare i documenti PDF nella pagina Web. L’API PDF Embed può essere utilizzata gratuitamente, ma è sufficiente ottenere una credenziale API.

Recupero delle credenziali API PDF Embed

Per ottenere una credenziale API PDF Embed gratuita, visita la pagina Introduzione dopo aver effettuato l'iscrizione a un nuovo account o aver effettuato l'accesso a un account esistente.

Fare clic su Crea nuove credenziali e quindi su Introduzione:

A questo punto, ti viene chiesto di registrarti per un account gratuito se non ne hai uno.

Selezionare PDF Embed API, quindi digitare il nome delle credenziali e il dominio dell'applicazione. Utilizza il dominio localhost a causa del test locale dell'app Web.

Fai clic sul pulsante Crea credenziali per accedere alle credenziali PDF e ottenere l’ID client (CHIAVE API).

Nel progetto Node.js, creare un file denominato .ENV nella cartella principale dell'applicazione e dichiarare la variabile di ambiente per l'ID client di incorporamento PDF con il valore della credenziale API KEY del passaggio precedente.

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

Successivamente, utilizzerai questo ID client per accedere all’API PDF Embed. Installa il pacchetto dotenv per accedere a questa variabile di ambiente utilizzando il codice Node.js.

npm install dotenv

Ora, apri il file app.js e aggiungi la seguente riga nella parte superiore del file in modo che Node.js possa caricare il modulo dotenv:

require('dotenv').config();

Visualizzazione dei PDF nell'app Web

Ora puoi utilizzare l’API PDF Embed per visualizzare i PDF nel sito. Apri la demo live PDF Embed API.

Nel pannello a sinistra, puoi scegliere la modalità di incorporamento più adatta alle tue esigenze del sito Web:

Si consiglia di utilizzare la modalità incorporamento in linea per i white paper e il generatore di codice in un secondo momento per incorporare un PDF nell’applicazione.

Creazione di una pagina in modalità incorporamento in linea

Per incorporare un visualizzatore di PDF nella pagina Web e visualizzare tutte le pagine contemporaneamente, è necessario creare una nuova pagina utilizzando la modalità di incorporamento in linea.

Creare una nuova visualizzazione nel file \views\in-line.ejs utilizzando il motore di visualizzazione 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
/>

E mettete i vostri clienti al primo posto.

</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>

Quindi, modificare \views\index.ejs per creare un pulsante per aprire la visualizzazione in linea.

<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>

Aprire il file app.js e dichiarare un nuovo router dopo la dichiarazione indexRouter:

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

Quindi aggiungere questo codice dopo app.use('/', indexRouter); per associare la vista in linea della modalità incorporamento al router:

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

Creare un nuovo file in-line.js in \route per creare una nuova logica router. Includi Express, un modulo Nodo che abilita il back-end di un'applicazione Web.

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

Quindi, creare un endpoint che gestisca le richieste di GET per un ID white paper specifico ed esegua il rendering della vista in-line.ejs.

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;

Guarda di nuovo la demo live per generare automaticamente il codice API PDF Embed. Fai clic su In linea nel pannello a sinistra:

Fare clic su Genera codice per visualizzare il codice HTML necessario per visualizzare un visualizzatore PDF contenitore dimensionato.

Fare clic su Copia codice e incollarlo nel file in-line.ejs.

<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>

Tuttavia, i parametri del documento sono ancora hardcoded. Sostituiamoli con la sintassi della parentesi graffa EJS (<%= someValue %>) per eseguire il rendering della pagina in base ai dati del modello di white paper.

<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>

Eseguire ora l'applicazione con il comando npm start e aprire il sito Web in http://localhost:3000.

Infine, scegli un white paper e fai clic su Visualizza documento per aprire una nuova pagina con il PDF incorporato in linea:

Osservate come sono ora presenti le opzioni Scarica PDF e Stampa PDF.

Si desidera controllare questi contrassegni nel back-end. Successivamente, è possibile implementare i controlli di autorizzazione in base all'identità dell'utente e limitare l'accesso in base alle regole aziendali. In questo caso la complessità non è necessaria, quindi è sufficiente modificare \route\in-line.js per includere le proprietà autenticate e delle autorizzazioni nell'oggetto modello.

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

Quindi, modificare \views\in-line.ejs in modo che la pagina Web possa eseguire il rendering dei valori dei contrassegni provenienti dal back-end.

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
}

Quindi, riesegui l'applicazione per vedere come si riflette questa modifica nel Visualizzatore PDF.

Creazione di contenuto gestito

In base allo scenario per l'utente finale, l'addetto al marketing del sito Web dell'azienda vuole capire meglio come gli utenti interagiscono con i loro contenuti basati sui PDF e incorporare il contenuto con il resto della loro pagina Web e del marchio.

Il nostro obiettivo è l'incorporamento di PDF, per cui non devi creare una funzione di autenticazione degli utenti. È sufficiente implementare un paywall semplice e falso utilizzando un modulo Web che accetti alcune informazioni utente e quindi visualizzi il documento PDF una volta inviato il modulo.

Sostituire il file \route\in-line.js con il contenuto seguente per fornire al modello di visualizzazione le informazioni utente:

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;

Sostituire quindi il contenuto \views\in-line.ejs con il codice seguente. Viene visualizzato il form dati utente o il visualizzatore PDF, a seconda che si tratti di un utente autenticato.

<!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
/>

E mettete i vostri clienti al primo posto.

</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>

I visitatori del sito ora possono accedere ai PDF solo dopo aver inviato le informazioni:

Attivazione degli eventi

Vediamo come integrare facilmente gli eventi di visualizzatore di PDF con la tua applicazione per raccogliere dati analitici per il commerciante. Per estendere il visualizzatore utilizzando PDF EmbedAPI, aggiungi le seguenti righe di codice dopo aver dichiarato la variabile adobeDCView e prima di chiamare il metodo previewFile:

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 }
);

A questo punto, rieseguire l'applicazione e aprire gli strumenti di sviluppo del browser Web per visualizzare i dati dell'evento.

Puoi inviare questi dati a Adobe Analytics o ad altri strumenti di analisi.

Fasi seguenti

Le API Acrobat Services aiutano gli sviluppatori a risolvere facilmente i problemi di pubblicazione digitale utilizzando un flusso di lavoro incentrato sulle PDF. Hai visto come creare una web app Nodo di esempio per visualizzare una raccolta di white paper. Quindi, acquisisci una credenziale API gratuita e crea un accesso limitato ai white paper, che possono essere visualizzati in una delle quattro modalità incorporata.

L'unione di questo flusso di lavoro consente all'ipotetico addetto marketing di raccogliere le informazioni sul contatto del lead in cambio di download di white paper e visualizzare le statistiche su chi sta interagendo con i PDF. Potete incorporare queste funzionalità nel vostro sito Web per guidare e monitorare il coinvolgimento degli utenti.

Se sei uno sviluppatore di Angular o di React, prova altri esempi che mostrano come integrare PDF Embed API con i progetti React e Angular.

L'Adobe consente di creare un'esperienza di cliente completa con soluzioni innovative. Scopri gratuitamente Adobe PDF Embed API. Per scoprire quali altre operazioni puoi eseguire, prova l’API dei servizi Adobe PDF con pay-as-you-gopr icing.

Introduzione con Adobe Acrobat Services API oggi stesso.