Βιβλιοθήκη προγράμματος προβολής PDF JavaScript ανοιχτού κώδικα
Δοκιμάστε αυτό το δωρεάν και ανοιχτού κώδικα JavaScript API ως βιβλιοθήκη PDF Parser, Viewer, Reader και Renderer.
Τι είναι το PDF.js;
Το PDF.js είναι μια βιβλιοθήκη προβολής PDF ανοιχτού κώδικα JavaScript και HTML5 που αναπτύχθηκε από τη Mozilla και επιτρέπει την προβολή εγγράφων PDF (Portable Document Format) στο πρόγραμμα περιήγησης.
Το PDF.js υποστηρίζει διάφορες λειτουργίες που παρατίθενται παρακάτω:
- Απόδοση αρχείων PDF: Μπορείτε να ανοίξετε και να προβάλετε, να διαβάσετε ή να αποδώσετε έγγραφα PDF σε προγράμματα περιήγησης ιστού.
- Εκτύπωση/Αποθήκευση αρχείων PDF: Το PDF.js επιτρέπει επίσης την εκτύπωση ή αποθήκευση εγγράφων PDF από το αγαπημένο σας πρόγραμμα περιήγησης ιστού.
- Λειτουργία παρουσίασης: Χρησιμοποιώντας τη λειτουργία παρουσίασης, μπορείτε να εμφανίσετε σελίδες PDF σε πλήρη οθόνη και να πλοηγηθείτε σε κάθε σελίδα σαν μια διαφάνεια παρουσίασης.
- Πλοήγηση σε PDF: Το PDF.js παρέχει ευκολότερα στοιχεία ελέγχου πλοήγησης με τα οποία μπορείτε να μετακινηθείτε στις επόμενες ή προηγούμενες σελίδες. Μπορείτε επίσης να μεταβείτε γρήγορα σε μια επιθυμητή σελίδα εισάγοντας τον αριθμό της σελίδας.
- Σχολιασμός PDF: Μπορείτε επίσης να προσθέσετε σχολιασμούς σε έγγραφα PDF προσθέτοντας κείμενο, εικόνες ή σχεδιάζοντας στις σελίδες PDF.
- Περιστροφή σελίδων PDF: Χρησιμοποιώντας το PDF.js, μπορείτε επίσης να περιστρέψετε σελίδες PDF δεξιόστροφα ή αριστερόστροφα.
- Κύλιση PDF: Το PDF.js προσφέρει ωραία στοιχεία ελέγχου για κύλιση σελίδων οριζόντια ή κάθετα κ.λπ.
- Ιδιότητες εγγράφου PDF: Τέλος, αλλά όχι λιγότερο σημαντικό, μπορείτε επίσης να προβάλετε ιδιότητες εγγράφων PDF μέσα στο πρόγραμμα περιήγησης χρησιμοποιώντας το πρόγραμμα προβολής PDF.js.
Ξεκινώντας με το PDF.js
Υπάρχουν τρεις τρόποι για να αποκτήσετε το PDF.js και να αρχίσετε να το χρησιμοποιείτε στα έργα ιστού σας.
1. Δημιουργία από την πηγή
Μπορείτε να κλωνοποιήσετε το αποθετήριο PDF.js από το GitHub και να το δημιουργήσετε μόνοι σας μετά την εγκατάσταση του Node.js, gulp και εξαρτήσεις PDF.js ακολουθώντας τα παρακάτω βήματα:
Κλωνοποιήστε το αποθετήριο PDF.js git σε τοπικό μηχάνημα και μεταβείτε στον φάκελο pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Εγκαταστήστε το Node.js
https://nodejs.org/en/download
Εγκαταστήστε το πακέτο gulp παγκοσμίως
npm install -g gulp-cli
Εγκαταστήστε τις εξαρτήσεις PDF.js
npm install
Εκτελέστε τον διακομιστή gulp και ανοίξτε το πρόγραμμα προβολής στο πρόγραμμα περιήγησης στη διεύθυνση http://localhost:8888/web/viewer.html
gulp server
2. Χρησιμοποιήστε προκατασκευασμένη διανομή
Το PDF.js προσφέρει επίσης προκατασκευασμένες διανομές μαζί με πηγαίο κώδικα που μπορείτε να βρείτε στις εκδόσεις PDF.js στο GitHub . Μπορείτε να κάνετε λήψη της προκατασκευασμένης βιβλιοθήκης PDF.js και να αρχίσετε να τη χρησιμοποιείτε.
3. Χρησιμοποιήστε τη φιλοξενούμενη βιβλιοθήκη μέσω CDN
Το PDF.js φιλοξενείται επίσης σε δωρεάν διακομιστές CDN. Λίγοι σύνδεσμοι κοινοποιούνται παρακάτω:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Εκτελέστε το πρόγραμμα προβολής PDF.js
Αφού κάνετε λήψη και εξαγάγετε μια προκατασκευασμένη βιβλιοθήκη διανομής από το GitHub, θα βρείτε δύο φακέλους: build και ιστός. Τα αρχεία βιβλιοθήκης PDF.js βρίσκονται στον φάκελο build όπου ως φάκελος web περιέχει ένα έργο προβολής που περιλαμβάνει τα viewer.html, viewer.css, viewer.js και σχετικά αρχεία. Εάν ελέγξετε τον κώδικα viewer.html, μπορείτε να δείτε ότι παραπέμπει στη βιβλιοθήκη pdf.js από το φάκελο build και άλλα σχετικά αρχεία css και js επίσης.
Ας εκτελέσουμε το viewer.html στο πρόγραμμα περιήγησης για να δούμε πώς φαίνεται το πρόγραμμα προβολής PDF.js:
Απόδοση/Προβολή εγγράφων PDF
Για απλή απόδοση ή προβολή ενός εγγράφου PDF στο πρόγραμμα περιήγησης χρησιμοποιώντας τη βιβλιοθήκη του προγράμματος προβολής PDF.js, πρέπει να συμπεριλάβουμε τη βιβλιοθήκη PDF.js στην κεφαλίδα του εγγράφου HTML χρησιμοποιώντας την ετικέτα script, να προσθέσουμε έναν καμβά > στο σώμα HTML και, στη συνέχεια, προσθέστε τον απαραίτητο κώδικα JavaScript για να χρησιμοποιήσετε το pdfjsLib και να υποσχεθείτε αντικείμενα για τη διαχείριση της ασύγχρονης φόρτωσης και απόδοσης του εγγράφου PDF.
Ο παραπάνω κώδικας απλώς φορτώνει ένα έγγραφο PDF στο πρόγραμμα περιήγησης χωρίς διεπαφή χρήστη ή στοιχεία ελέγχου όπως παρακάτω:
Online επίδειξη
Δοκιμάστε αυτό το πλήρες διαδικτυακό Επίδειξη του PDF.js Viewer για να εξερευνήσετε όλες τις δυνατότητες της βιβλιοθήκης PDF.js.
συμπέρασμα
Το PDF.js είναι δωρεάν και ανοιχτού κώδικα JavaScrpit βιβλιοθήκη προβολής PDF με ισχυρή κοινότητα. Παρέχει υποστήριξη μεταξύ προγραμμάτων περιήγησης τόσο για μοντέρνα όσο και για παλαιού τύπου προγράμματα περιήγησης. Ναι, η εμπειρία χρήστη σε προγράμματα περιήγησης παλαιού τύπου μπορεί να μην είναι ίδια με τα σύγχρονα, αλλά εξακολουθεί να είναι καλή ως δωρεάν βιβλιοθήκη. Είναι ασφαλές και προσαρμόσιμο. Οι δυνατότητες είναι περιορισμένες, αλλά ως πρόγραμμα προβολής PDF, λειτουργεί εξαιρετικά.
Το PDF.js παρέχει ωραία API και αρχιτεκτονική για τη δημιουργία ενός προγράμματος προβολής PDF που βασίζεται στον ιστό. Δεδομένου ότι είναι χρονοβόρο να προσθέσετε περισσότερα στοιχεία ελέγχου διεπαφής χρήστη στο πρόγραμμα προβολής, ώστε να εξοικονομήσετε χρόνο από τους προγραμματιστές, το PDF.js παρέχει επίσης τον πηγαίο κώδικα ενός πλήρως λειτουργικού και πλούσιου σε λειτουργίες PDF veiwer που μπορείτε να βρείτε (βλ. viewer.html, viewer.js και viewer.css κ.λπ.) στο φάκελο web του πακέτου διανομής της βιβλιοθήκης PDF.js.