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 u PDF-documenten (Portable Document Format) in de browser kunt bekijken.

PDF.js ondersteunt verschillende functies die hieronder worden vermeld:

• PDF's renderen: U kunt PDF-documenten openen, bekijken, lezen of renderen in webbrowsers.
• PDF's afdrukken/opslaan: Met PDF.js kunt u ook PDF-documenten afdrukken of opslaan vanuit uw favoriete webbrowser.
• Presentatiemodus: Met de presentatiemodus kunt u PDF-pagina's op volledig scherm weergeven en naar elke pagina navigeren als een presentatieslide.
• PDF Navigatie: PDF.js biedt eenvoudigere navigatiecontroles 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 PDF-documenten ook annoteren door tekst, afbeeldingen of tekeningen op de PDF-pagina's toe te voegen.
• PDF-pagina's roteren: Met PDF.js kunt u PDF-pagina's ook met de klok mee of tegen de klok in roteren.
• Scrollend PDF: PDF.js biedt handige bedieningselementen om pagina's horizontaal of verticaal te scrollen, etc.
• Eigenschappen van PDF-documenten: Ten slotte kunt u de eigenschappen van PDF-documenten ook bekijken in de browser 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 te gebruiken in uw webprojecten.

1. Bouwen vanuit de bron

U kunt de PDF.js-repository klonen van GitHub en deze zelf bouwen nadat u Node.js, gulp en PDF.js-afhankelijkheden hebt geïnstalleerd 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

2. Gebruik vooraf gebouwde distributie

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 gebruiken.

3. Gebruik gehoste bibliotheek via CDN

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

PDF.js Viewer uitvoeren

Nadat u een vooraf gebouwde distributiebibliotheek van GitHub hebt gedownload en uitgepakt, vindt u twee mappen: build en web. PDF.js-bibliotheekbestanden zijn te vinden in de map build, terwijl de map web een viewerproject bevat met daarin viewer.html, viewer.css, viewer.js en gerelateerde bestanden. Als u de viewer.html-code controleert, ziet u dat deze verwijst naar de pdf.js-bibliotheek uit de map build en andere gerelateerde css- en js-bestanden.

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

PDF-documenten weergeven/bekijken

Om een PDF-document eenvoudig te kunnen renderen of bekijken in de browser met behulp van de PDF.js-viewerbibliotheek, moeten we de PDF.js-bibliotheek opnemen in de header van ons HTML-document met behulp van de script-tag, een canvas toevoegen aan de HTML-body en vervolgens de benodigde JavaScript-code toevoegen om pdfjsLib te gebruiken en promise-objecten om asynchroon laden en renderen van het PDF-document af te handelen.

De bovenstaande code laadt alleen een PDF-document in de browser zonder enige gebruikersinterface of bedieningselementen, zoals hieronder:

Online-demo

Probeer deze volledig uitgeruste 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 viewer bibliotheek met een sterke community. Het biedt cross-browser ondersteuning voor zowel moderne als oude browsers. Ja, de gebruikerservaring op oude browsers is misschien niet hetzelfde als 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 geweldig.

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 om ontwikkelaars tijd te besparen, biedt PDF.js ook broncode van een volledig functionele en feature-rijke PDF-viewer die u kunt vinden (controleer viewer.html, viewer.js en viewer.css etc.) in de web-map van het PDF.js-bibliotheekdistributiepakket.

Vergelijkbare Producten