Open Source JavaScript PDF Viewer-bibliotheek

Wat is PDF.js?

PDF.js is een open source JavaScript- en HTML5-gebaseerde PDF-viewerbibliotheek ontwikkeld door Mozilla waarmee PDF-documenten (Portable Document Format) in de browser kunnen worden bekeken.

PDF.js ondersteunt verschillende functies die hieronder worden vermeld:

• PDF's renderen: u kunt PDF-documenten in webbrowsers openen en bekijken, lezen of renderen.
• PDF's afdrukken/opslaan: Met PDF.js kunt u ook PDF-documenten afdrukken of opslaan vanuit uw favoriete webbrowser.
• Presentatiemodus: in de Presentatiemodus kunt u PDF-pagina's op volledig scherm weergeven en naar elke pagina navigeren als een presentatiedia.
• PDF-navigatie: PDF.js biedt eenvoudigere navigatieknoppen waarmee u naar de volgende of vorige pagina's kunt gaan. U kunt ook snel naar een gewenste pagina springen door het nummer van de pagina in te voeren.
• PDF-annotatie: u kunt ook aantekeningen maken in PDF-documenten door tekst, afbeeldingen toe te voegen of te tekenen op de PDF-pagina's.
• PDF-pagina's roteren: Met PDF.js kunt u PDF-pagina's ook met de klok mee of tegen de klok in draaien.
• PDF scrollen: PDF.js biedt mooie bedieningselementen om pagina's horizontaal of verticaal te scrollen, enz.
• PDF-documenteigenschappen: Als laatste, maar daarom niet minder belangrijk, kunt u ook de eigenschappen van PDF-documenten in de browser bekijken met behulp van de PDF.js-viewer.

GitHub-statistieken

Naam:
Taal:
Sterren:
Vorken:
Licentie:
De opslagplaats is voor het laatst bijgewerkt op

Aan de slag met PDF.js

Er zijn drie manieren om PDF.js te verkrijgen en deze in uw webprojecten te gebruiken.

U kunt de PDF.js-repository klonen vanuit GitHub en deze zelf bouwen na installatie van Node.js, gulp en PDF.js-afhankelijkheden door de onderstaande stappen te volgen:

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

PDF.js biedt ook vooraf gebouwde distributies samen met broncode die u kunt vinden op PDF.js releases op GitHub . U kunt de vooraf gebouwde PDF.js-bibliotheek downloaden en deze gaan gebruiken.

PDF.js wordt ook gehost op gratis CDN-servers. Hieronder worden enkele links gedeeld:

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

Voer PDF.js Viewer uit

Nadat je een vooraf gebouwde distributiebibliotheek van GitHub hebt gedownload en uitgepakt, vind je twee mappen: build en web. PDF.js-bibliotheekbestanden zijn te vinden in de map build, waar de map web een viewerproject bevat dat viewer.html, viewer.css, viewer.js en gerelateerde bestanden bevat. Als u de viewer.html-code controleert, kunt u zien dat deze ook verwijst naar de pdf.js-bibliotheek uit de build-map en andere gerelateerde CSS- en js-bestanden.

Laten we viewer.html in de browser uitvoeren om te zien hoe de PDF.js-viewer eruit ziet:

Render/bekijk PDF-documenten

Om eenvoudig een PDF-document in de browser weer te geven of te bekijken met behulp van de PDF.js-viewerbibliotheek, moeten we de PDF.js-bibliotheek opnemen in onze HTML-documentkop met behulp van de script-tag en een canvas toevoegen > naar de HTML-body en voeg vervolgens de benodigde JavaScript-code toe om pdfjsLib te gebruiken en beloven objecten om het asynchrone laden en weergeven van het PDF-document af te handelen.

Bovenstaande code laadt gewoon een PDF-document in de browser zonder enige gebruikersinterface of bedieningselementen, zoals hieronder:

Onlinedemo

Probeer deze volledig functionele online PDF.js Viewer-demo om alle functies van de PDF.js-bibliotheek te verkennen.

Conclusie

PDF.js is een gratis en open source JavaScrpit PDF-viewerbibliotheek met een sterke community. Het biedt ondersteuning voor meerdere browsers voor zowel moderne als oudere browsers. Ja, de gebruikerservaring in oudere browsers is misschien niet hetzelfde als in de moderne, maar het is nog steeds goed als gratis bibliotheek. Het is veilig en aanpasbaar. De functies zijn beperkt, maar als PDF-viewer werkt het prima.

PDF.js biedt mooie API's en architectuur om een webgebaseerde PDF-viewer te bouwen. Omdat het tijdrovend is om meer UI-besturingselementen aan de viewer toe te voegen en ontwikkelaars tijd te besparen, biedt PDF.js ook de broncode van een volledig functionele en veelzijdige PDF-viewer die u kunt vinden (controleer viewer.html, viewer.js en viewer.css enz.) in de map web van het bibliotheekdistributiepakket PDF.js.

Vergelijkbare Producten