Biblioteka Open Source JavaScript PDF Viewer

Czym jest PDFObject?

PDFObject to darmowa i otwarta biblioteka JavaScript opracowana do osadzania dokumentów PDF na stronach internetowych. Działa poprzez generowanie elementu HTML embed, a następnie integrowanie go ze strukturą HTML. Następnie element embed renderuje dokument PDF. PDFObject nie jest rendererem samym w sobie; koncentruje się raczej na tworzeniu elementu embed i umieszczaniu go w kodzie HTML. Może tworzyć elementy embed do wyświetlania plików PDF w pełnym rozmiarze lub w określonych sekcjach strony internetowej.

Poniżej przedstawiono niektóre z głównych cech PDFObject:

• Mechanizm awaryjny: PDFObject ma mechanizm awaryjny, który w przypadku, gdy przeglądarka nie obsługuje osadzania plików PDF, automatycznie aktywuje logikę awaryjną, umożliwiając programistom podanie łącza do pliku PDF lub innej alternatywnej logiki w razie potrzeby.
• Integracja PDF.js: PDFObject zapewnia opcjonalną integrację z PDF.js, umożliwiając deweloperom osadzanie plików PDF niezależnie od domyślnego programu do przeglądania plików PDF w przeglądarce. Ta funkcja jest przydatna, gdy przeglądarka nie obsługuje osadzania dokumentów PDF w HTML.
• PDF Open Parameters: PDFObject obsługuje zastrzeżone przez firmę Adobe PDF Open Parameters, co pozwala programistom określać parametry wyświetlania PDF. Obejmuje to opcje takie jak tryb wyświetlania i inne ustawienia specyficzne dla firmy Adobe. Wszystkie te parametry można znaleźć tutaj.

Statystyki GitHuba

Nazwa:
Język:
Gwiazdy:
Widły:
Licencja:
Repozytorium zostało ostatnio zaktualizowane o godzinie

Pierwsze kroki z PDFObject

Bibliotekę PDFObject możemy pobrać za pomocą modułu npm:

npm i pdfobject

Osadź PDF w HTML z weryfikacją obsługi przeglądarki

Możemy osadzić dokument PDF w HTML przy użyciu biblioteki PDFObject. Początkowo sprawdzimy, czy przeglądarka obsługuje osadzanie dokumentu PDF w HTML przy użyciu metody supportsPDFs biblioteki PDFObject. Jeśli zwróci ona wartość true, wskazując, że obsługuje osadzanie PDF w HTML, osadzimy plik PDF w HTML przy użyciu metody embed("document_name.pdf","#elementid"). Ta funkcja osadzi plik PDF w określonym elemencie w HTML. W przypadku osadzania pliku PDF w pełnym rozmiarze nie będziemy podawać żadnego identyfikatora elementu i wywołamy metodę jako embed("document_name.pdf"). Jeśli jednak zwróci wartość false, wskazując, że nie obsługuje osadzania PDF w HTML, przejdziemy do innej alternatywnej logiki, jeśli będzie to konieczne. Sprawdź poniższy fragment kodu, aby uzyskać szczegóły:

Wyjście

Poniższy wynik wyświetla dokument PDF osadzony w kodzie HTML:

Utwórz mechanizm awaryjny

Możemy ustanowić mechanizm awaryjny podczas osadzania pliku PDF na stronie internetowej za pomocą PDFObject, który jest aktywowany, gdy przeglądarka nie obsługuje osadzania pliku PDF w HTML. PDFObject wykorzystuje parametr o nazwie fallbackLink, który zawiera alternatywną logikę podczas wywoływania funkcji embed. Tak więc, jeśli przeglądarka nie obsługuje osadzania plików PDF, kod obecny w fallbackLink jest wykonywany w wyznaczonym elemencie div. Sprawdź poniższy fragment kodu, aby uzyskać szczegóły:

Wyjście

Zrzut ekranu wyjściowego wyświetla zawartość wyświetlaną przez mechanizm zapasowy. Mechanizm zapasowy został aktywowany, gdy przeglądarka nie obsługiwała osadzania plików PDF w HTML.

Osadź plik PDF za pomocą parametrów otwierania PDF firmy Adobe

Możemy osadzać pliki PDF wraz z niektórymi parametrami otwierania za pomocą biblioteki PDFObject. Użyjemy metody PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}), aby osadzić dokument PDF w HTML wraz z parametrami otwierania. Te Parametry otwierania PDF obejmują funkcje takie jak otwieranie pliku PDF i przewijanie do określonego numeru strony. Sprawdź poniższy fragment kodu, aby uzyskać szczegóły:

Wyjście

Poniższy zrzut ekranu pokazuje dokument PDF osadzony w kodzie HTML z dodatkowymi parametrami, które powodują, że element osadzony przewija się do strony numer 3 po jego wyrenderowaniu:

Osadź PDF poprzez integrację PDF.js

Jak wiemy, PDFObject zależy od obsługi przez przeglądarkę osadzania plików PDF w HTML, ale zapewnia alternatywną metodę renderowania plików PDF, jeśli przeglądarka jej nie obsługuje. Alternatywną metodą jest zintegrowanie PDF.js z PDFObject. Aby to zrobić, musimy skonfigurować PDF.js na naszym serwerze, a następnie przekazać parametry ForcePDFJS: true i PDFJS_URL: path/to/viewer.html/in/pdf.js do funkcji embed.

Uwaga: W poniższym przykładowym fragmencie kodu utworzyliśmy i zainicjowaliśmy serwer zawierający bibliotekę PDF.js, więc http://localhost:8888 wskazuje na bibliotekę PDF.js.

Wyjście

Poniższy zrzut ekranu przedstawia dokument PDF wyrenderowany poprzez integrację PDFObject z PDF.js:

Wniosek

Podsumowując, PDFObject to łatwa w użyciu biblioteka JavaScript do osadzania dokumentów PDF w HTML. Chociaż nie działa jako renderer i polega na obsłudze elementów osadzania przez przeglądarkę, co może powodować problemy, takie jak zepsuty interfejs użytkownika w przeglądarkach, które nie obsługują elementów osadzania, biblioteka ma funkcje rozwiązywania takich problemów poprzez wykrywanie obsługi elementów osadzania i mechanizm awaryjny. Możemy również renderować pliki PDF w przeglądarkach, które nie obsługują elementów osadzania, integrując PDF.js z PDFObject. Pomimo swoich ograniczeń PDFObject wyróżnia się jako cenne narzędzie do osadzania i renderowania dokumentów PDF na stronach internetowych.

Podobne Produkty