Libreria di visualizzatori PDF JavaScript open source
Libreria JavaScript gratuita e open source per visualizzare documenti PDF.
Cos'è PDFObject?
PDFObject è una libreria JavaScript gratuita e open source sviluppata per incorporare documenti PDF nelle pagine web. Funziona generando un elemento di incorporamento HTML e quindi integrandolo nella struttura HTML. L'elemento embed esegue quindi il rendering del documento PDF. PDFObject non è un renderer stesso; piuttosto si concentra sulla creazione dell'elemento embed e sul suo posizionamento all'interno dell'HTML. Può creare elementi incorporati per visualizzare PDF a grandezza naturale o all'interno di sezioni specifiche della pagina web.
Di seguito sono riportate alcune delle caratteristiche principali di PDFObject:
- Meccanismo di fallback: PDFObject dispone di un meccanismo di fallback, pertanto nei casi in cui un browser non supporta l'incorporamento di PDF, PDFObject attiva automaticamente la logica di fallback consentendo agli sviluppatori di fornire un collegamento al PDF o qualsiasi altra logica alternativa secondo necessità .
- Integrazione PDF.js: PDFObject fornisce un'integrazione opzionale con PDF.js, consentendo agli sviluppatori di incorporare PDF indipendentemente dal PDF predefinito del browser spettatore. Questa funzionalità è utile quando il browser non supporta l'incorporamento di documenti PDF nell'HTML.
- Parametri aperti PDF: PDFObject supporta i Parametri aperti PDF proprietari di Adobe che consentono agli sviluppatori di specificare i parametri per la visualizzazione dei PDF. Ciò include opzioni come la modalità di visualizzazione e altre impostazioni specifiche di Adobe. Tutti questi parametri possono essere trovati qui.
Iniziare con PDFObject
Possiamo scaricare la libreria PDFObject utilizzando il modulo npm:
Installa utilizzando NPM
npm i pdfobject
Incorpora PDF in HTML con la verifica del supporto del browser
Possiamo incorporare un documento PDF in HTML utilizzando la libreria PDFObject. Inizialmente controlleremo se il browser supporta l'incorporamento del documento PDF in HTML utilizzando il metodo supportsPDFs della libreria PDFObject. Se restituisce true indicando che supporta l'incorporamento di PDF in HTML, incorporeremo il PDF nell'HTML utilizzando il metodo embed("document_name.pdf","#elementid"). Questa funzione incorporerà il PDF in un elemento specifico nell'HTML. Per l'incorporamento di PDF a dimensione intera non menzioneremo alcun ID elemento e chiameremo il metodo come embed("nome_documento.pdf"). Tuttavia, se restituisce false indicando che non supporta l'incorporamento di PDF in HTML, passeremo ad un'altra logica alternativa secondo necessità. Controlla lo snippet di codice qui sotto per i dettagli:
Produzione
Il seguente output visualizza il documento PDF incorporato nell'HTML:
Creare un meccanismo di fallback
Possiamo stabilire un meccanismo di fallback durante l'incorporamento di un PDF in una pagina Web utilizzando PDFObject che viene attivato quando il browser non supporta l'incorporamento di PDF in HTML. PDFObject utilizza un parametro chiamato fallbackLink che contiene una logica alternativa mentre chiama la funzione embed. Pertanto, se un browser non supporta l'incorporamento di PDF, il codice presente nel fallbackLink viene eseguito nell'elemento div designato. Controlla lo snippet di codice qui sotto per i dettagli:
Produzione
Lo screenshot di output mostra il contenuto visualizzato dal meccanismo di fallback. Il meccanismo di fallback veniva attivato quando il browser non supportava l'incorporamento di PDF in HTML.
Incorpora PDF con i parametri di apertura PDF di Adobe
Possiamo incorporare PDF insieme ad alcuni parametri di apertura utilizzando la libreria PDFObject. Utilizzeremo il metodo PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parametri }}) per incorporare il documento PDF nell'HTML insieme ai parametri di apertura . Questi Parametri di apertura PDF includono funzionalità come l'apertura del PDF e lo scorrimento fino a un numero di pagina specifico. Controlla lo snippet di codice qui sotto per i dettagli:
Produzione
Lo screenshot seguente mostra il documento PDF incorporato nell'HTML con parametri aggiuntivi che fanno scorrere l'elemento incorporamento alla pagina numero 3 dopo averlo visualizzato:
Incorpora PDF integrando PDF.js
Come sappiamo PDFObject dipende dal supporto del browser per incorporare PDF in HTML ma fornisce un metodo alternativo per eseguire il rendering dei PDF se il browser non lo supporta. Il metodo alternativo è integrare PDF.js con PDFObject. Per farlo dovremo impostare PDF.js sul nostro server e poi passeremo ForcePDFJS: true e PDFJS_URL: path/to/viewer.html/in/pdf.js parametri alla funzione embed.
Nota: nello snippet di codice di esempio riportato di seguito, abbiamo creato e avviato un server contenente la libreria PDF.js in modo che http://localhost:8888 punti alla libreria PDF.js.
Produzione
Lo screenshot seguente mostra il documento PDF renderizzato integrando PDFObject con PDF.js:
Conclusione
In conclusione, PDFObject è una libreria JavaScript facile da usare per incorporare documenti PDF in HTML. Anche se non funziona come renderer e si basa sul supporto del browser per gli elementi incorporati che possono causare problemi come un'interfaccia utente interrotta nei browser che non supportano l'elemento incorporamento, ma la libreria dispone di funzionalità per risolvere tali problemi attraverso il rilevamento del supporto per incorporare elemento e meccanismo di fallback. Possiamo anche eseguire il rendering dei PDF nei browser che non supportano gli elementi incorporati integrando PDF.js con PDFObject. Nonostante i suoi limiti, PDFObject si distingue come uno strumento prezioso per incorporare e visualizzare documenti PDF nelle pagine web.
