Бібліотека засобу перегляду PDF з відкритим кодом JavaScript
Безкоштовна бібліотека JavaScript із відкритим вихідним кодом для перегляду PDF-документів.
Що таке PDFObject?
PDFObject — це безкоштовна бібліотека JavaScript із відкритим вихідним кодом, розроблена для вбудовування документів PDF у веб-сторінки. Він працює, генеруючи вбудований елемент HTML, а потім інтегруючи його в структуру HTML. Потім елемент embed відтворює PDF-документ. PDFObject сам по собі не є рендерером; скоріше він зосереджений на створенні вбудованого елемента та розміщенні його в HTML. Він може створювати вбудовані елементи для відображення PDF-файлів у повному розмірі або в певних розділах веб-сторінки.
Нижче наведено деякі з основних функцій PDFObject:
- Резервний механізм: PDFObject має резервний механізм, тож у випадках, коли браузер не підтримує вбудовування PDF-файлів, PDFObject автоматично активує резервну логіку, дозволяючи розробникам надати посилання на PDF або будь-яку іншу альтернативну логіку за потреби .
- Інтеграція PDF.js: PDFObject забезпечує необов’язкову інтеграцію з PDF.js, дозволяючи розробникам вставляти PDF-файли незалежно від стандартного PDF-файлу браузера глядач. Ця функція корисна, коли браузер не підтримує вбудовування документів PDF у HTML.
- Параметри відкриття PDF: PDFObject підтримує власні Параметри відкриття PDF компанії Adobe, що дозволяє розробникам визначати параметри для відображення PDF. Це включає такі параметри, як режим перегляду та інші налаштування Adobe. Усі ці параметри можна знайти тут.
Початок роботи з PDFObject
Ми можемо завантажити бібліотеку PDFObject за допомогою модуля npm:
Встановити за допомогою NPM
npm i pdfobject
Вставте PDF у HTML за допомогою перевірки підтримки браузера
Ми можемо вставити PDF-документ у HTML за допомогою бібліотеки PDFObject. Спочатку ми перевіримо, чи підтримує браузер вбудовування документа PDF у HTML за допомогою методу supportsPDFs бібліотеки PDFObject. Якщо він повертає значення true, вказуючи на те, що він підтримує вбудовування PDF-файлів у HTML, тоді ми вставимо PDF-файл у HTML за допомогою методу embed("document_name.pdf","#elementid"). Ця функція вбудує PDF-файл у певний елемент у HTML. Для вбудовування повнорозмірного PDF-файлу ми не будемо згадувати жодного ідентифікатора елемента та викличемо метод як embed("document_name.pdf"). Однак, якщо він повертає false, вказуючи на те, що він не підтримує вбудовування PDF-файлів у HTML, ми перейдемо до іншої альтернативної логіки за потреби. Подробиці дивіться у фрагменті коду нижче:
Наступний результат відображає документ PDF, вбудований у HTML:
Створіть запасний механізм
Ми можемо встановити резервний механізм під час вбудовування PDF-файлу у веб-сторінку за допомогою PDFObject, який активується, коли браузер не підтримує вбудовування PDF-файлу в HTML. PDFObject використовує параметр під назвою fallbackLink, який містить альтернативну логіку під час виклику функції embed. Отже, якщо браузер не підтримує вбудовування PDF-файлів, код, наявний у резервному посиланні, виконується у призначеному елементі div. Подробиці дивіться у фрагменті коду нижче:
На вихідному знімку екрана відображається вміст, який відображається резервним механізмом. Запасний механізм був активований, коли браузер не підтримував вбудовування PDF-файлів у HTML.
Вставте PDF за допомогою параметрів відкриття PDF від Adobe
Ми можемо вставляти PDF-файли разом із деякими параметрами відкриття за допомогою бібліотеки PDFObject. Ми використаємо метод PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}), щоб вставити PDF-документ у HTML разом із параметрами відкриття . Ці Параметри відкриття PDF містять такі функції, як відкриття PDF-файлу та прокрутка до певного номера сторінки. Подробиці дивіться у фрагменті коду нижче:
На наступному знімку екрана показано PDF-документ, вбудований у HTML, із додатковими параметрами, які змушують вбудований елемент прокручуватися до сторінки номер 3 після його відтворення:
Вставте PDF за допомогою інтеграції PDF.js
Як ми знаємо, PDFObject залежить від підтримки браузером для вбудовування PDF-файлів у HTML, але він надає альтернативний метод відтворення PDF-файлів, якщо браузер його не підтримує. Альтернативним методом є інтеграція PDF.js із PDFObject. Щоб це зробити, нам потрібно буде налаштувати PDF.js на нашому сервері, а потім ми передамо ForcePDFJS: true та PDFJS_URL: path/to/viewer.html/in/pdf.js для функції embed.
Примітка. У наведеному нижче прикладі фрагмента коду ми створили та запустили сервер, що містить бібліотеку PDF.js, тому http://localhost:8888 вказує на бібліотеку PDF.js.
На наступному знімку екрана показано відтворений PDF-документ шляхом інтеграції PDFObject із PDF.js:
Висновок
Підсумовуючи, PDFObject — це проста у використанні бібліотека JavaScript для вбудовування документів PDF у HTML. Хоча він не функціонує як рендерер і покладається на підтримку веб-переглядачем вбудованих елементів, що може спричинити такі проблеми, як несправний інтерфейс користувача у браузерах, які не підтримують вбудований елемент, але бібліотека має функції для вирішення таких проблем за допомогою виявлення підтримки для вбудований елемент і резервний механізм. Ми також можемо відтворювати PDF-файли в браузерах, які не підтримують вбудовані елементи, інтегрувавши PDF.js із PDFObject. Незважаючи на свої обмеження, PDFObject виділяється як цінний інструмент для вбудовування та відтворення PDF-документів на веб-сторінках.
