Biblioteka przeglądarki JavaScript PDF typu open source

Co to jest PDFObject?

PDFObject to bezpłatna biblioteka JavaScript o otwartym kodzie źródłowym, opracowana do osadzania dokumentów PDF na stronach internetowych. Działa poprzez wygenerowanie elementu HTML do osadzenia, a następnie zintegrowanie go ze strukturą HTML. Następnie element embed renderuje dokument PDF. PDFObject sam w sobie nie jest modułem renderującym; skupia się raczej na utworzeniu elementu embed i umieszczeniu go w kodzie HTML. Może tworzyć elementy osadzane 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 funkcji PDFObject:

• Mechanizm awaryjny: PDFObject posiada mechanizm awaryjny, więc w przypadku, gdy przeglądarka nie obsługuje osadzania plików PDF, PDFObject automatycznie aktywuje logikę zastępczą, umożliwiając programistom udostępnienie łącza do pliku PDF lub dowolnej innej alternatywnej logiki, jeśli zajdzie taka potrzeba .
• Integracja z PDF.js: PDFObject zapewnia opcjonalną integrację z PDF.js, umożliwiając programistom osadzanie plików PDF niezależnie od domyślnego pliku PDF przeglądarki widz. Ta funkcja jest przydatna, gdy przeglądarka nie obsługuje osadzania dokumentów PDF w kodzie HTML.
• Parametry otwarcia PDF: PDFObject obsługuje zastrzeżone Parametry otwarcia PDF firmy Adobe, umożliwiając programistom określanie parametrów wyświetlania plików PDF. Obejmuje to takie opcje, jak tryb widoku 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ź plik PDF w formacie HTML z weryfikacją obsługi przeglądarki

Za pomocą biblioteki PDFObject możemy osadzić dokument PDF w formacie HTML. Na początek sprawdzimy, czy przeglądarka obsługuje osadzanie dokumentu PDF w formacie HTML, korzystając z metody supportsPDFs biblioteki PDFObject. Jeśli zwróci wartość true, wskazując, że obsługuje osadzanie plików PDF w formacie HTML, wówczas osadzimy plik PDF w formacie HTML za pomocą metody embed("document_name.pdf","#elementid"). Ta funkcja osadzi plik PDF w określonym elemencie kodu HTML. W przypadku osadzania pełnowymiarowego pliku PDF nie będziemy podawać żadnego identyfikatora elementu i wywołamy metodę jako embed("nazwa_dokumentu.pdf"). Jeśli jednak zwróci wartość false, wskazując, że nie obsługuje osadzania plików PDF w formacie HTML, w razie potrzeby przejdziemy do innej alternatywnej logiki. Sprawdź poniższy fragment kodu, aby poznać szczegóły:

Poniższe dane wyjściowe wyświetlają dokument PDF osadzony w kodzie HTML:

Utwórz mechanizm awaryjny

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

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

Osadź plik PDF przy użyciu otwartych parametrów Adobe PDF

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

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

Osadź plik PDF, integrując plik PDF.js

Jak wiemy, obiekt PDFObject zależy od obsługi przez przeglądarkę osadzania plików PDF w formacie HTML, ale zapewnia alternatywną metodę renderowania plików PDF, jeśli przeglądarka jej nie obsługuje. Alternatywną metodą jest integracja PDF.js z PDFObject. Aby to zrobić będziemy musieli ustawić PDF.js na naszym serwerze i wtedy przekażemy 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.

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

Wniosek

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

Podobne Produkty