È incredibile quante informazioni abbiamo oggi memorizzate in formato PDF. Secondo la PDF association, ogni anno vengono creati circa 2,5 trilioni di PDF, che costituiscono il 6% del web. Tuttavia, come sviluppatore web, i PDF su un sito web possono presentare una serie di sfide:
- Le esperienze di visualizzazione variano notevolmente tra diversi utenti e dispositivi perché dipendono da un visualizzatore PDF. Che sia incorporato nei browser web o nelle librerie online gratuite, alcuni visualizzatori sono migliori di altri. Adobe Acrobat Reader è generalmente lo standard universale per visualizzare correttamente i PDF.
- Diventa difficile per me essere in grado di incorporare i PDF nel resto del mio sito web. Il più delle volte i PDF spingono gli utenti a scaricare i PDF sui loro dispositivi.
- Convertire i PDF in HTML è difficile e inaffidabile. Se voglio presentare un contenuto all’interno di una pagina web che è in formato PDF, spesso potrei appiattire il PDF per renderlo più facile da incorporare.
- Non ho visibilità su come il mio visitatore sta visualizzando quei PDF. Questo significa che non ho idea se qualcuno sta leggendo certe pagine, quanto tempo trascorre su quelle pagine, ecc.
Fortunatamente, Adobe ha rilasciato Adobe PDF Embed API (PDF Embed), un modo semplice per incorporare un PDF direttamente nel tuo sito web con solo un semplice frammento di codice. È completamente gratuito da usare e rende il lato client all’interno della vostra applicazione web. Non devi imparare una sofisticata libreria PDF, ed è super facile da fare. Nessun dato viene reso sui server Adobe. Infatti, puoi anche imparare a giocarci qui.
NULLA! Questa è la cosa più bella. Non hai bisogno di nient’altro che una pagina web per usare PDF Embed.
Utilizzo del sito demo per provare l’API PDF Embed
Il modo più semplice per familiarizzare con PDF Embed è quello di provarlo sul sito demo. È una risorsa facile per iniziare perché ti permette di:
- Vedere in tempo reale le diverse modalità di incorporamento disponibili per i tuoi PDF.
- Personalizzare quali caratteristiche vuoi come parte del visualizzatore come strumenti di annotazione, download PDF, Stampa PDF, controlli di pagina, ecc.
- Genera il codice da incollare direttamente nel tuo sito web.
Importa il tuo ID cliente
Se vuoi provare il PDF Embed nel tuo codice, funziona senza un ID cliente quando lo usi localmente. Tuttavia, se vuoi incorporarlo nel tuo sito web, dovrai ottenere un ID cliente. Ottieni il tuo Client ID qui.
Qui ci sono un paio di suggerimenti importanti:
- Per creare un ID cliente, è necessario avere un ID Adobe. Se non ne avete uno, potete iscrivervi qui usando un indirizzo email, un ID Google, Facebook o Apple.
- È necessario impostare il dominio della vostra applicazione affinché questo funzioni.
Una volta creato il vostro Client ID, dovrete copiarlo e usarlo nel vostro codice.
NOTA: Mentre potete modificare le vostre configurazioni nella console Adobe.io, vorrete andare al link per creare la vostra chiave. Se crei la tua chiave dall’interno di Adobe.io Console, non ti darà la possibilità di impostare il tuo dominio.
Scegliere la modalità di incorporazione
Una delle cose potenti di PDF Embed è che hai diverse modalità di incorporazione tra cui scegliere:
Full Window
Full Window ti permette di prendere un’esperienza di visualizzazione simile ad Adobe Acrobat Reader sul tuo computer e incorporarla nel tuo sito web. Lo trovo ideale quando si visualizzano documenti di lunga durata, o se voglio avere un’esperienza di visualizzazione PDF familiare nella mia UI.
Contenitore di dimensioni
I contenitori dimensionati sono ottimi per contenuti come le presentazioni PowerPoint che sono state convertite in PDF, o una serie di istruzioni. Lo trovo meno ideale se state incorporando dei PDF di forma lunga.
In-Line
La vista In-Line può aiutare i designer a incorporare i loro progetti in una pagina web senza doverli ricostruire o appiattire in un’immagine. In-Line view prende il vostro PDF e lo rende in linea come HTML. Mi piace questa modalità di incorporazione per quando si desidera visualizzare contenuti come infografiche che si sono progettate in Illustrator, InDesign, ecc. e sono state esportate in PDF, ma si vuole che siano ancora ricercabili e abbiano collegamenti ipertestuali senza doversi preoccupare di ridisegnare per il web.
Lightbox
La Lightbox apre il visualizzatore di PDF in cima alla pagina web per fornire una visione più mirata. Questa modalità è ideale quando hai link a file PDF in tutto il tuo sito web, ma vuoi controllare l’esperienza di visualizzazione, raccogliere analisi ed attivare eventi basati su come il tuo pubblico sta interagendo con i file PDF che hai pubblicato.
Generare il tuo codice
Quando stai usando il Sito Demo e clicchi su Genera codice, apparirà qualcosa di simile a questo:
Per iniziare, dovrai sostituire i seguenti elementi:
- Sostituisci <YOUR_CLIENT_ID> con il Client ID che hai generato.
- Sostituisci il parametro url con l’URL del tuo PDF che vuoi visualizzare.
NOTA: Poiché PDF Embed esegue il rendering lato client nel browser, onorerà qualsiasi restrizione Cross-Domain impostata, quindi potresti aver bisogno di assicurarti che le tue intestazioni consentano il collegamento cross-domain. - Cambia fileName con il nome del tuo documento. Questo apparirà nel visualizzatore.
Una volta fatto questo, sarai in grado di incorporare il tuo PDF nel tuo sito web. È così facile!
Esempi che usano Services SDK oggi
Ci sono diverse applicazioni che già oggi usano Services SDK:
- Componente visualizzatore PDF per AEM
- PDF come un capo
- Microsoft SharePoint Plugin
- Adobe Acrobat per G Suite
Conclusione
PDF Embed permette davvero un sacco di flessibilità per sfruttare i PDF con i vostri siti web. C’è molto di più che puoi fare con esso da Analytics, Event Listeners, e più che puoi imparare di più in questa documentazione.
Vogliamo sentire da te
Una volta che hai dato un’occhiata a PDF Embed, ci piacerebbe sentire i tuoi pensieri! Partecipa al forum di Adobe Document Cloud per dare il tuo feedback, o rispondi a questo articolo!
Aggiornamento (07/07/2020): Aggiornato per aggiungere la nuova modalità Lightbox embed e aggiunto una nuova immagine di intestazione.
AGGIORNAMENTO (31/07/2020): Aggiornato per riflettere il nuovo branding.