Biblioteca de visualització de PDF de codi obert JavaScript

Què és PDF.js?

PDF.js és una biblioteca de visualització de PDF basada en JavaScript i HTML5 desenvolupada per Mozilla que permet visualitzar documents PDF (Portable Document Format) al navegador.

PDF.js admet diverses funcions que s'enumeren a continuació:

• Representar PDF: podeu obrir i veure, llegir o representar documents PDF als navegadors web.
• Imprimeix/Desa PDF: PDF.js també permet imprimir o desar documents PDF des del teu navegador web preferit.
• Mode de presentació: amb el mode de presentació, podeu mostrar pàgines PDF a pantalla completa i navegar per cada pàgina com una diapositiva de presentació.
• Navegació PDF: PDF.js ofereix controls de navegació més fàcils amb els quals podeu passar a les pàgines següents o anteriors. També podeu saltar ràpidament a una pàgina desitjada introduint el número de la pàgina.
• Anotació PDF: també podeu anotar documents PDF afegint text, imatges o dibuixos a les pàgines PDF.
• Gira les pàgines PDF: amb PDF.js, també pots girar les pàgines PDF en sentit horari o antihorari.
• Desplaçament de PDF: PDF.js ofereix controls agradables per desplaçar-se per pàgines horitzontalment o verticalment, etc.
• Propietats del document PDF:, per últim, però no menys important, també podeu veure les propietats dels documents PDF al navegador mitjançant el visualitzador PDF.js.

Estadístiques de GitHub

Nom:
Llenguatge:
Estrelles:
Forquilles:
Llicència:
El repositori es va actualitzar per última vegada a

Primers passos amb PDF.js

Hi ha tres maneres d'obtenir PDF.js i començar a utilitzar-lo als vostres projectes web.

1. Construeix des de la font

Podeu clonar el repositori PDF.js des de GitHub i crear-lo vosaltres mateixos després d'instal·lar Node.js, gulp i Dependències de PDF.js seguint els passos següents:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

https://nodejs.org/en/download

npm install -g gulp-cli

npm install

gulp server

2. Utilitzeu una distribució preconstruïda

PDF.js també ofereix distribucions preconstruïdes juntament amb el codi font que podeu trobar a Versions de PDF.js a GitHub . Podeu descarregar la biblioteca PDF.js preconstruïda i començar a utilitzar-la.

3. Utilitzeu la biblioteca allotjada mitjançant CDN

PDF.js també està allotjat en servidors CDN gratuïts. A continuació es comparteixen pocs enllaços:

• https://cdnjs.com/libraries/pdf.js
• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://unpkg.com/pdfjs-dist

Executeu PDF.js Viewer

Després de baixar i extreure una biblioteca de distribució preconstruïda de GitHub, trobareu dues carpetes: build i web. Els fitxers de biblioteca PDF.js es poden trobar a la carpeta build, on com a carpeta web conté un projecte de visualitzador que inclou viewer.html, viewer.css, viewer.js i fitxers relacionats. Si comproveu el codi viewer.html, podreu veure que fa referència a la biblioteca pdf.js des de la carpeta de compilació i també a altres fitxers css i js relacionats.

Executem viewer.html al navegador per veure com es veu el visualitzador PDF.js:

Renderització/visualització de documents PDF

Per representar o visualitzar simplement un document PDF al navegador mitjançant la biblioteca del visualitzador PDF.js, hem d'incloure la biblioteca PDF.js a la capçalera del document HTML mitjançant l'etiqueta script, afegir un llenç > al cos HTML i després afegiu el codi JavaScript necessari per utilitzar pdfjsLib i prometre objectes per gestionar la càrrega i la representació asíncrona del document PDF.

El codi anterior només carrega un document PDF al navegador sense cap interfície d'usuari ni controls com es mostra a continuació:

Demo en línia

Proveu aquesta demo del visualitzador de PDF.js en línia per explorar-ho tot. característiques de la biblioteca PDF.js.

Conclusió

PDF.js és una biblioteca de visualització de PDF JavaScrpit gratuïta i de codi obert amb una comunitat sòlida. Proporciona suport entre navegadors tant per a navegadors moderns com antics. Sí, és possible que l'experiència de l'usuari en navegadors antics no sigui la mateixa que els moderns, però encara és bona com a biblioteca gratuïta. És segur i personalitzable. Les funcions són limitades, però com a visualitzador de PDF, funciona molt bé.

PDF.js ofereix API i arquitectura agradables per crear un visualitzador de PDF basat en web. Com que requereix més temps afegir més controls de la interfície d'usuari al visor per estalviar temps als desenvolupadors, PDF.js també proporciona el codi font d'un visualitzador de PDF totalment funcional i ric en funcions que podeu trobar (comproveu viewer.html, viewer.js i viewer.css, etc.) a la carpeta web del paquet de distribució de biblioteques PDF.js.

Productes Similars