Biblioteka przeglądarki JavaScript PDF typu open source
Wypróbuj ten darmowy i otwarty interfejs API JavaScript jako bibliotekę analizatora składni, przeglądarki, czytnika i modułu renderującego PDF.
Co to jest PDF.js?
PDF.js to biblioteka przeglądarki plików PDF o otwartym kodzie źródłowym, oparta na JavaScript i HTML5, opracowana przez Mozillę, która umożliwia przeglądanie dokumentów PDF (Portable Document Format) w przeglądarce.
PDF.js obsługuje kilka funkcji wymienionych poniżej:
- Renderuj pliki PDF: możesz otwierać i wyświetlać, czytać lub renderować dokumenty PDF w przeglądarkach internetowych.
- Drukuj/zapisz pliki PDF: PDF.js umożliwia także drukowanie lub zapisywanie dokumentów PDF z Twojej ulubionej przeglądarki internetowej.
- Tryb prezentacji: w trybie prezentacji możesz wyświetlać strony PDF na pełnym ekranie i przechodzić do każdej strony jak slajd prezentacji.
- Nawigacja w formacie PDF: PDF.js zapewnia łatwiejsze elementy sterujące nawigacją, za pomocą których możesz przechodzić do następnych lub poprzednich stron. Możesz także szybko przejść do żądanej strony, wprowadzając numer strony.
- Adnotacje PDF: możesz także dodawać adnotacje do dokumentów PDF, dodając tekst, obrazy lub rysunki na stronach PDF.
- Obróć strony PDF: za pomocą PDF.js możesz także obracać strony PDF w prawo lub w lewo.
- Przewijanie plików PDF: PDF.js oferuje przydatne elementy sterujące umożliwiające przewijanie stron w poziomie lub w pionie itp.
- Właściwości dokumentu PDF: I wreszcie, co nie mniej ważne, możesz także przeglądać właściwości dokumentów PDF w przeglądarce, korzystając z przeglądarki PDF.js.
Pierwsze kroki z PDF.js
Istnieją trzy sposoby pobrania pliku PDF.js i rozpoczęcia jego używania w projektach internetowych.
Możesz sklonować repozytorium PDF.js z GitHub i zbudować je samodzielnie po zainstalowaniu Node.js, przełknij i PDF.js, wykonując poniższe kroki:
Sklonuj repozytorium git PDF.js na komputerze lokalnym i przejdź do folderu pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Zainstaluj Node.js
https://nodejs.org/en/download
Zainstaluj pakiet gulp globalnie
npm install -g gulp-cli
Zainstaluj zależności PDF.js
npm install
Uruchom serwer gulp i otwórz przeglądarkę w przeglądarce pod adresem http://localhost:8888/web/viewer.html
gulp server
PDF.js oferuje również gotowe dystrybucje wraz z kodem źródłowym, które można znaleźć w wydaniach PDF.js w GitHub . Możesz pobrać gotową bibliotekę PDF.js i zacząć z niej korzystać.
Plik PDF.js jest również hostowany na bezpłatnych serwerach CDN. Poniżej udostępniamy kilka linków:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Uruchom przeglądarkę PDF.js
Po pobraniu i rozpakowaniu gotowej biblioteki dystrybucyjnej z GitHub znajdziesz dwa foldery: build i sieć. Pliki biblioteki PDF.js można znaleźć w folderze build, gdzie jako folder web zawiera projekt przeglądarki zawierający pliki viewer.html, viewer.css, viewer.js i powiązane pliki. Jeśli sprawdzisz kod viewer.html, zobaczysz, że odwołuje się on do biblioteki pdf.js z folderu kompilacji i innych powiązanych plików css i js.
Uruchommy viewer.html w przeglądarce i zobaczmy jak wygląda przeglądarka PDF.js:
Renderuj/wyświetlaj dokumenty PDF
Aby po prostu wyrenderować lub wyświetlić dokument PDF w przeglądarce przy użyciu biblioteki przeglądarki PDF.js, musimy dołączyć bibliotekę PDF.js do naszego nagłówka dokumentu HTML za pomocą tagu script, dodać płótno do treści HTML, a następnie dodaj niezbędny kod JavaScript, aby użyć pdfjsLib i obiecać, że obiekty będą obsługiwać asynchroniczne ładowanie i renderowanie dokumentu PDF.
Powyższy kod po prostu ładuje dokument PDF w przeglądarce bez żadnego interfejsu użytkownika ani elementów sterujących, jak poniżej:
Demo internetowe
Wypróbuj tę w pełni funkcjonalną online Wersja demonstracyjna przeglądarki PDF.js, w której można poznać wszystkie funkcje biblioteki PDF.js.
Wniosek
PDF.js to bezpłatna biblioteka przeglądarki plików PDF JavaScrpit o otwartym kodzie źródłowym, posiadająca silną społeczność. Zapewnia obsługę wielu przeglądarek zarówno nowoczesnych, jak i starszych przeglądarek. Tak, wrażenia użytkownika w starszych przeglądarkach mogą nie być takie same jak w nowoczesnych, ale nadal są dobre jako bezpłatna biblioteka. Jest bezpieczny i konfigurowalny. Funkcje są ograniczone, ale jako przeglądarka plików PDF działa świetnie.
PDF.js zapewnia ładne interfejsy API i architekturę do zbudowania internetowej przeglądarki plików PDF. Ponieważ dodawanie większej liczby elementów sterujących interfejsu użytkownika do przeglądarki jest czasochłonne, aby zaoszczędzić czas programistów, PDF.js udostępnia również kod źródłowy w pełni funkcjonalnej i bogatej w funkcje przeglądarki plików PDF, którą można znaleźć (sprawdź pliki viewer.html, viewer.js i viewer.css itp.) w folderze web pakietu dystrybucyjnego biblioteki PDF.js.