Libreria di visualizzazione PDF JavaScript Open Source

Che cos'è PDFObject?

PDFObject è una libreria JavaScript gratuita e open source sviluppata per incorporare documenti PDF in pagine web. Funziona generando un elemento embed HTML e quindi integrandolo nella struttura HTML. L'elemento embed quindi esegue il rendering del documento PDF. PDFObject non è un renderer in sé; piuttosto si concentra sulla creazione dell'elemento embed e sul suo posizionamento all'interno dell'HTML. Può creare elementi embed per visualizzare i PDF a grandezza naturale o all'interno di sezioni specifiche della pagina web.

Di seguito sono riportate alcune delle principali caratteristiche di PDFObject:

• Meccanismo di fallback: PDFObject ha un meccanismo di fallback, quindi 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, a seconda delle necessità.
• Integrazione PDF.js: PDFObject fornisce un'integrazione opzionale con PDF.js, consentendo agli sviluppatori di incorporare PDF indipendentemente dal visualizzatore PDF predefinito del browser. Questa funzionalità è utile quando il browser non supporta l'incorporamento di documenti PDF nell'HTML.
• Parametri PDF Open: PDFObject supporta i Parametri PDF Open proprietari di Adobe che consentono agli sviluppatori di specificare parametri per la visualizzazione PDF. Ciò include opzioni come la modalità di visualizzazione e altre impostazioni specifiche di Adobe. Tutti questi parametri possono essere trovati qui.

Statistiche GitHub

Nome:
Lingua:
Stelle:
Forchette:
Licenza:
L'ultimo aggiornamento del repository è avvenuto il

Introduzione a PDFObject

Possiamo scaricare la libreria PDFObject utilizzando il modulo npm:

npm i pdfobject

Incorpora PDF in HTML con verifica del supporto del browser

Possiamo incorporare un documento PDF in HTML usando la libreria PDFObject. Inizialmente controlleremo se il browser supporta l'incorporamento del documento PDF in HTML usando il metodo supportsPDFs della libreria PDFObject. Se restituisce true indicando che supporta l'incorporamento PDF in HTML allora incorporeremo il PDF in HTML usando il metodo embed("document_name.pdf","#elementid"). Questa funzione incorporerà il PDF in un elemento specifico in HTML. Per l'incorporamento PDF a grandezza naturale non menzioneremo alcun ID elemento e chiameremo il metodo come embed("document_name.pdf"). Tuttavia, se restituisce false indicando che non supporta l'incorporamento PDF in HTML allora passeremo ad altre logiche alternative se necessario. Controlla il frammento di codice qui sotto per i dettagli:

Produzione

L'output seguente mostra 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 denominato fallbackLink che contiene una logica alternativa durante la chiamata della funzione embed. Quindi, se un browser non supporta l'incorporamento di PDF, il codice presente in fallbackLink viene eseguito nell'elemento div designato. Controlla il frammento di codice sottostante per i dettagli:

Produzione

Lo screenshot di output mostra il contenuto visualizzato dal meccanismo di fallback. Il meccanismo di fallback è stato attivato quando il browser non supportava l'incorporamento di PDF in HTML.

Incorpora PDF con i parametri PDF aperti di Adobe

Possiamo incorporare PDF insieme ad alcuni parametri di apertura usando 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 a un numero di pagina specifico. Controlla il frammento di codice qui sotto per i dettagli:

Produzione

La seguente schermata mostra il documento PDF incorporato nell'HTML con parametri aggiuntivi che fanno sì che l'elemento incorporato scorra fino alla pagina numero 3 dopo il rendering:

Incorpora PDF integrando PDF.js

Come sappiamo, PDFObject dipende dal supporto del browser per incorporare i PDF in HTML, ma fornisce un metodo alternativo per renderizzare i PDF se il browser non lo supporta. Il metodo alternativo consiste nell'integrare PDF.js con PDFObject. Per farlo, dovremo impostare PDF.js sul nostro server e poi passeremo i parametri ForcePDFJS: true e PDFJS_URL: path/to/viewer.html/in/pdf.js alla funzione embed.

Nota: nel frammento di codice di esempio riportato di seguito, abbiamo creato e avviato un server contenente la libreria PDF.js, quindi http://localhost:8888 punta alla libreria PDF.js.

Produzione

La seguente schermata 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. Sebbene non funzioni come un renderer e si affidi al supporto del browser per gli elementi incorporati, il che può causare problemi come un'interfaccia utente non funzionante nei browser che non supportano l'elemento incorporato, la libreria ha funzionalità per risolvere tali problemi tramite il suo rilevamento del supporto per l'elemento incorporato e il meccanismo di fallback. Possiamo anche eseguire il rendering di 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 rendere i documenti PDF nelle pagine Web.

Prodotti Simili