Perpustakaan Penampil PDF JavaScript Sumber Terbuka

Apa itu Objek PDF?

PDFObject adalah pustaka JavaScript sumber terbuka dan gratis yang dikembangkan untuk menyematkan dokumen PDF di halaman web. Ia bekerja dengan menghasilkan elemen penyematan HTML dan kemudian mengintegrasikannya ke dalam struktur HTML. Elemen semat kemudian merender dokumen PDF. PDFObject bukanlah penyaji itu sendiri; melainkan berfokus pada pembuatan elemen semat dan menempatkannya di dalam HTML. Itu dapat membuat elemen penyematan untuk menampilkan PDF dalam ukuran penuh atau dalam bagian tertentu pada halaman web.

Berikut adalah beberapa fitur utama PDFObject:

• Mekanisme Penggantian: PDFObject memiliki mekanisme penggantian sehingga jika browser tidak mendukung penyematan PDF, PDFObject secara otomatis mengaktifkan logika penggantian yang memungkinkan pengembang menyediakan tautan ke PDF atau logika alternatif lainnya sesuai kebutuhan .
• Integrasi PDF.js: PDFObject menyediakan integrasi opsional dengan PDF.js, memungkinkan pengembang untuk menyematkan PDF terlepas dari PDF default browser penonton. Fitur ini berguna ketika browser tidak mendukung penyematan dokumen PDF ke dalam HTML.
• Parameter Terbuka PDF: PDFObject mendukung Parameter Terbuka PDF milik Adobe yang memungkinkan pengembang menentukan parameter untuk tampilan PDF. Ini termasuk opsi seperti mode tampilan dan pengaturan khusus Adobe lainnya. Semua parameter ini dapat ditemukan di sini.

Statistik GitHub

Nama:
Bahasa:
Bintang:
Garpu:
Lisensi:
Repositori terakhir diperbarui pada

Memulai dengan PDFObject

Kita dapat mengunduh perpustakaan PDFObject menggunakan modul npm:

npm i pdfobject

Sematkan PDF dalam HTML dengan Verifikasi Dukungan Browser

Kita dapat menyematkan dokumen PDF dalam HTML menggunakan perpustakaan PDFObject. Awalnya kami akan memeriksa apakah browser mendukung penyematan dokumen PDF dalam HTML menggunakan metode supportsPDFs dari pustaka PDFObject. Jika hasilnya benar yang menunjukkan bahwa ia mendukung penyematan PDF dalam HTML maka kami akan menyematkan PDF dalam HTML menggunakan metode embed("document_name.pdf","#elementid"). Fungsi ini akan menyematkan PDF dalam elemen tertentu di HTML. Untuk penyematan PDF ukuran penuh kami tidak akan menyebutkan id elemen apa pun dan akan memanggil metode ini sebagai embed("document_name.pdf"). Namun, jika hasilnya salah yang menunjukkan bahwa itu tidak mendukung penyematan PDF dalam HTML maka kami akan beralih ke logika alternatif lain sesuai kebutuhan. Periksa cuplikan kode di bawah ini untuk detailnya:

Keluaran

Output berikut menampilkan dokumen PDF yang tertanam dalam HTML:

Buat Mekanisme Penggantian

Kita dapat membuat mekanisme fallback saat menyematkan PDF di halaman web menggunakan PDFObject yang diaktifkan ketika browser tidak mendukung penyematan PDF dalam HTML. PDFObject menggunakan parameter bernama fallbackLink yang berisi logika alternatif saat memanggil fungsi embed. Jadi, jika browser tidak mendukung penyematan PDF, kode yang ada di fallbackLink akan dieksekusi di elemen div yang ditentukan. Periksa cuplikan kode di bawah ini untuk detailnya:

Keluaran

Tangkapan layar keluaran menampilkan konten yang ditampilkan oleh mekanisme fallback. Mekanisme fallback diaktifkan ketika browser tidak mendukung penyematan PDF dalam HTML.

Sematkan PDF dengan Parameter Terbuka PDF Adobe

Kita dapat menyematkan PDF bersama dengan beberapa parameter pembukaan menggunakan perpustakaan PDFObject. Kita akan menggunakan metode PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameter }}) untuk menyematkan dokumen PDF ke dalam HTML beserta parameter pembukanya . Parameter Terbuka PDF ini mencakup fitur seperti membuka PDF dan menggulir ke nomor halaman tertentu. Periksa cuplikan kode di bawah ini untuk detailnya:

Keluaran

Tangkapan layar berikut menunjukkan dokumen PDF yang disematkan dalam HTML dengan parameter tambahan yang membuat elemen penyematan bergulir ke halaman nomor 3 setelah merendernya:

Sematkan PDF dengan mengintegrasikan PDF.js

Seperti yang kita ketahui PDFObject bergantung pada dukungan browser untuk menyematkan PDF dalam HTML tetapi ia menyediakan metode alternatif untuk merender PDF jika browser tidak mendukungnya. Metode alternatifnya adalah dengan mengintegrasikan PDF.js dengan PDFObject. Untuk melakukannya, kita harus menyiapkan PDF.js di server kita dan kemudian kita akan meneruskan ForcePDFJS: true dan PDFJS_URL: path/to/viewer.html/in/pdf parameter .js ke fungsi embed.

Catatan: Dalam cuplikan kode contoh di bawah, kami telah membuat dan memulai server yang berisi pustaka PDF.js sehingga http://localhost:8888 mengarah ke pustaka PDF.js.

Keluaran

Tangkapan layar berikut menunjukkan dokumen PDF yang dirender dengan mengintegrasikan PDFObject dengan PDF.js:

Kesimpulan

Kesimpulannya, PDFObject adalah perpustakaan JavaScript yang mudah digunakan untuk menyematkan dokumen PDF dalam HTML. Meskipun tidak berfungsi sebagai penyaji dan bergantung pada dukungan browser untuk elemen penyematan yang dapat menyebabkan masalah seperti UI rusak di browser yang tidak mendukung elemen penyematan, namun perpustakaan memiliki fitur untuk menyelesaikan masalah tersebut melalui deteksi dukungannya untuk elemen penyematan dan mekanisme fallback. Kami juga dapat merender PDF di browser yang tidak mendukung elemen penyematan dengan mengintegrasikan PDF.js dengan PDFObject. Terlepas dari keterbatasannya, PDFObject menonjol sebagai alat yang berharga, untuk menyematkan dan merender dokumen PDF di halaman web.

Produk Sejenis