Libreria di visualizzatori PDF JavaScript open source
Prova questa API JavaScript gratuita e open source come libreria PDF Parser, visualizzatore, lettore e renderer.
Cos'è PDF.js?
PDF.js è una libreria di visualizzatori PDF open source basata su JavaScript e HTML5 sviluppata da Mozilla che consente di visualizzare documenti PDF (Portable Document Format) nel browser.
PDF.js supporta diverse funzionalità elencate di seguito:
- Rendering di PDF: puoi aprire e visualizzare, leggere o eseguire il rendering di documenti PDF nei browser web.
- Stampa/Salva PDF: PDF.js consente anche di stampare o salvare documenti PDF dal tuo browser web preferito.
- Modalità presentazione: utilizzando la modalità Presentazione, puoi mostrare le pagine PDF a schermo intero e navigare in ciascuna pagina come una diapositiva di presentazione.
- Navigazione PDF: PDF.js fornisce controlli di navigazione più semplici che ti consentono di passare alle pagine successive o precedenti. Puoi anche passare rapidamente alla pagina desiderata inserendo il numero della pagina.
- Annotazione PDF: puoi anche annotare i documenti PDF aggiungendo testo, immagini o disegni sulle pagine PDF.
- Ruota le pagine PDF: utilizzando PDF.js, puoi anche ruotare le pagine PDF in senso orario o antiorario.
- PDF a scorrimento: PDF.js offre comodi controlli per scorrere le pagine orizzontalmente o verticalmente, ecc.
- Proprietà del documento PDF: ultimo ma non meno importante, puoi anche visualizzare le proprietà dei documenti PDF all'interno del browser utilizzando il visualizzatore PDF.js.
Iniziare con PDF.js
Esistono tre modi per ottenere PDF.js e iniziare a utilizzarlo nei tuoi progetti web.
1. Costruisci dalla fonte
Puoi clonare il repository PDF.js da GitHub e crearlo da solo dopo aver installato Node.js, gulp e PDF.js seguendo i passaggi seguenti:
Clona il repository git PDF.js sul computer locale e passa alla cartella pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Installa Node.js
https://nodejs.org/en/download
Installa il pacchetto gulp a livello globale
npm install -g gulp-cli
Installa le dipendenze PDF.js
npm install
Esegui gulp server e apri il visualizzatore nel browser all'indirizzo http://localhost:8888/web/viewer.html
gulp server
2. Utilizzare una distribuzione predefinita
PDF.js offre anche distribuzioni predefinite insieme al codice sorgente che puoi trovare nelle versioni PDF.js su GitHub . Puoi scaricare la libreria PDF.js predefinita e iniziare a utilizzarla.
3. Utilizza la libreria ospitata tramite CDN
PDF.js è ospitato anche su server CDN gratuiti. Alcuni collegamenti sono condivisi di seguito:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Esegui PDF.js Viewer
Dopo aver scaricato ed estratto una libreria di distribuzione predefinita da GitHub, trovi due cartelle: build e web. I file di libreria PDF.js si trovano nella cartella build dove la cartella web contiene un progetto visualizzatore che include viewer.html, viewer.css, viewer.js e file correlati. Se controlli il codice viewer.html, puoi vedere che fa riferimento alla libreria pdf.js dalla cartella build e anche da altri file css e js correlati.
Eseguiamo viewer.html nel browser per vedere come appare il visualizzatore PDF.js:
Rendering/visualizzazione di documenti PDF
Per eseguire semplicemente il rendering o visualizzare un documento PDF nel browser utilizzando la libreria di visualizzazione PDF.js, dobbiamo includere la libreria PDF.js nell'intestazione del nostro documento HTML utilizzando il tag script, aggiungere un tela al corpo HTML e quindi aggiungere il codice JavaScript necessario per utilizzare pdfjsLib e promettere agli oggetti di gestire il caricamento e il rendering asincroni del documento PDF.
Il codice sopra carica semplicemente un documento PDF nel browser senza alcuna interfaccia utente o controlli come di seguito:
Dimostrazione in linea
Prova questo online con tutte le funzionalità Demo di PDF.js Viewer per esplorare tutte le funzionalità della libreria PDF.js.
Conclusione
PDF.js è una libreria di visualizzatori PDF JavaScrpit gratuita e open source con una forte comunità. Fornisce supporto multibrowser sia per i browser moderni che per quelli legacy. Sì, l'esperienza utente sui browser legacy potrebbe non essere la stessa di quelli moderni, ma è comunque valida come libreria gratuita. È sicuro e personalizzabile. Le funzionalità sono limitate ma come visualizzatore PDF funziona benissimo.
PDF.js fornisce API e architettura interessanti per creare un visualizzatore PDF basato sul Web. Poiché aggiungere ulteriori controlli dell'interfaccia utente al visualizzatore richiede molto tempo per risparmiare tempo agli sviluppatori, PDF.js fornisce anche il codice sorgente di un visualizzatore PDF completamente funzionale e ricco di funzionalità che puoi trovare (controlla viewer.html, viewer.js e viewer.css ecc.) nella cartella web del pacchetto di distribuzione della libreria PDF.js.