Perpustakaan Pemapar PDF JavaScript Sumber Terbuka

Apakah PDFObject?

PDFObject ialah perpustakaan JavaScript sumber terbuka dan percuma yang dibangunkan untuk membenamkan dokumen PDF dalam halaman web. Ia berfungsi dengan menjana elemen benam HTML dan kemudian menyepadukannya ke dalam struktur HTML. Elemen benam kemudiannya memaparkan dokumen PDF. PDFObject bukan pemapar itu sendiri; sebaliknya ia memberi tumpuan kepada mencipta elemen benam dan meletakkannya dalam HTML. Ia boleh mencipta elemen benam untuk memaparkan PDF dalam saiz penuh atau dalam bahagian tertentu halaman web.

Berikut ialah beberapa ciri utama PDFObject:

• Mekanisme Sandaran: PDFObject mempunyai mekanisme sandaran jadi dalam kes di mana penyemak imbas tidak menyokong pembenaman PDF, PDFObject secara automatik mengaktifkan logik sandaran yang membolehkan pembangun sama ada menyediakan pautan ke PDF atau mana-mana logik alternatif lain seperti yang diperlukan .
• Penyepaduan PDF.js: PDFObject menyediakan penyepaduan pilihan dengan PDF.js, membolehkan pembangun membenamkan PDF tanpa mengira PDF lalai penyemak imbas penonton. Ciri ini berguna apabila penyemak imbas tidak menyokong membenamkan dokumen PDF dalam HTML.
• Parameter Terbuka PDF: PDFObject menyokong Parameter Terbuka PDF milik Adobe yang membolehkan pembangun menentukan parameter untuk paparan PDF. Ini termasuk pilihan seperti mod paparan dan tetapan khusus Adobe yang lain. Semua parameter ini boleh didapati di sini.

Statistik GitHub

nama:
Bahasa:
Bintang:
Garpu:
Lesen:
Repositori dikemas kini terakhir pada

Bermula dengan PDFObject

Kami boleh memuat turun perpustakaan PDFObject menggunakan modul npm:

npm i pdfobject

Benamkan PDF dalam HTML dengan Pengesahan Sokongan Penyemak Imbas

Kita boleh membenamkan dokumen PDF dalam HTML menggunakan perpustakaan PDFObject. Pada mulanya kami akan menyemak sama ada penyemak imbas menyokong membenamkan dokumen PDF dalam HTML menggunakan kaedah supportsPDFs pustaka PDFObject. Jika ia mengembalikan true yang menunjukkan bahawa ia menyokong pembenaman PDF dalam HTML maka kami akan membenamkan PDF dalam HTML menggunakan kaedah embed("document_name.pdf","#elementid"). Fungsi ini akan membenamkan PDF dalam elemen tertentu dalam HTML. Untuk benaman PDF bersaiz penuh kami tidak akan menyebut sebarang id elemen dan akan memanggil kaedah sebagai embed("document_name.pdf"). Walau bagaimanapun, jika ia mengembalikan palsu yang menunjukkan bahawa ia tidak menyokong pembenaman PDF dalam HTML maka kami akan beralih ke logik ganti lain seperti yang diperlukan. Semak coretan kod di bawah untuk butiran:

Output berikut memaparkan dokumen PDF yang dibenamkan dalam HTML:

Cipta Mekanisme Fallback

Kami boleh mewujudkan mekanisme sandaran semasa membenamkan PDF dalam halaman web menggunakan PDFObject yang diaktifkan apabila penyemak imbas tidak menyokong membenamkan PDF dalam HTML. PDFObject menggunakan parameter yang dipanggil fallbackLink yang mengandungi logik alternatif sambil memanggil fungsi embed. Jadi, jika penyemak imbas tidak menyokong membenamkan PDF, kod yang terdapat dalam fallbackLink dilaksanakan dalam elemen div yang ditetapkan. Semak coretan kod di bawah untuk butiran:

Tangkapan skrin output memaparkan kandungan yang dipaparkan oleh mekanisme sandaran. Mekanisme sandaran telah diaktifkan apabila penyemak imbas tidak menyokong membenamkan PDF dalam HTML.

Benamkan PDF dengan Parameter Terbuka PDF Adobe

Kami boleh membenamkan PDF bersama beberapa parameter pembukaan menggunakan perpustakaan PDFObject. Kami akan menggunakan kaedah PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) untuk membenamkan dokumen PDF dalam HTML bersama-sama dengan parameter pembukaan . Parameter Terbuka PDF ini termasuk ciri seperti membuka PDF dan menatal ke nombor halaman tertentu. Semak coretan kod di bawah untuk butiran:

Tangkapan skrin berikut menunjukkan dokumen PDF yang dibenamkan dalam HTML dengan parameter tambahan yang menjadikan elemen benam menatal ke halaman nombor 3 selepas memaparkannya:

Benamkan PDF dengan menyepadukan PDF.js

Seperti yang kita tahu PDFObject bergantung pada sokongan penyemak imbas untuk membenamkan PDF dalam HTML tetapi ia menyediakan kaedah alternatif untuk membuat PDF jika penyemak imbas tidak menyokongnya. Kaedah alternatif adalah untuk menyepadukan PDF.js dengan PDFObject. Untuk melakukannya, kami perlu menyediakan PDF.js pada pelayan kami dan kemudian kami akan menghantar ForcePDFJS: true dan PDFJS_URL: path/to/viewer.html/in/pdf.js pada fungsi benam.

Nota: Dalam coretan kod contoh di bawah, kami telah mencipta dan memulakan pelayan yang mengandungi pustaka PDF.js supaya http://localhost:8888 menghala ke pustaka PDF.js.

Tangkapan skrin berikut menunjukkan dokumen PDF yang diberikan dengan menyepadukan PDFObject dengan PDF.js:

Kesimpulan

Kesimpulannya, PDFObject ialah perpustakaan JavaScript yang mudah digunakan untuk membenamkan dokumen PDF dalam HTML. Walaupun ia tidak berfungsi sebagai pemapar dan bergantung pada sokongan penyemak imbas untuk elemen benam yang boleh menyebabkan isu seperti UI rosak dalam penyemak imbas yang tidak menyokong elemen benam tetapi perpustakaan mempunyai ciri untuk menyelesaikan isu tersebut melalui pengesanan sokongannya untuk elemen benam dan mekanisme sandaran. Kami juga boleh memaparkan PDF dalam penyemak imbas yang tidak menyokong elemen benam dengan menyepadukan PDF.js dengan PDFObject. Walaupun hadnya, PDFObject menonjol sebagai alat yang berharga, untuk membenamkan dan membuat dokumen PDF dalam halaman web.

Produk Serupa