Pustaka Penampil PDF JavaScript Sumber Terbuka

Apa itu PDFObject?

PDFObject adalah pustaka JavaScript gratis dan sumber terbuka yang dikembangkan untuk menyematkan dokumen PDF di halaman web. Ia bekerja dengan membuat elemen sematan HTML dan kemudian mengintegrasikannya ke dalam struktur HTML. Elemen sematan tersebut kemudian merender dokumen PDF. PDFObject sendiri bukanlah perender; melainkan berfokus pada pembuatan elemen sematan dan penempatannya di dalam HTML. Ia dapat membuat elemen sematan untuk menampilkan PDF dalam ukuran penuh atau di dalam bagian tertentu dari halaman web.

Berikut ini adalah beberapa fitur utama PDFObject:

• Mekanisme Fallback: PDFObject memiliki mekanisme fallback sehingga jika browser tidak mendukung penyisipan PDF, PDFObject secara otomatis mengaktifkan logika fallback yang memungkinkan pengembang menyediakan tautan ke PDF atau logika alternatif lainnya sesuai kebutuhan.
• Integrasi PDF.js: PDFObject menyediakan integrasi opsional dengan PDF.js, yang memungkinkan pengembang untuk menyematkan PDF tanpa mempedulikan penampil PDF bawaan browser. Fitur ini berguna saat browser tidak mendukung penyematan dokumen PDF dalam HTML.
• Parameter Pembukaan PDF: PDFObject mendukung Parameter Pembukaan PDF milik Adobe yang memungkinkan pengembang menentukan parameter untuk tampilan PDF. Ini mencakup 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 pustaka PDFObject menggunakan modul npm:

npm i pdfobject

Sematkan PDF dalam HTML dengan Verifikasi Dukungan Browser

Kita dapat menanamkan dokumen PDF dalam HTML menggunakan pustaka PDFObject. Awalnya kita akan memeriksa apakah peramban mendukung penanaman dokumen PDF dalam HTML menggunakan metode supportsPDFs dari pustaka PDFObject. Jika mengembalikan true yang menunjukkan bahwa ia mendukung penanaman PDF dalam HTML, maka kita akan menanamkan PDF dalam HTML menggunakan metode embed("document_name.pdf","#elementid"). Fungsi ini akan menanamkan PDF dalam elemen tertentu dalam HTML. Untuk penanaman PDF ukuran penuh, kita tidak akan menyebutkan id elemen apa pun dan akan memanggil metode sebagai embed("document_name.pdf"). Namun, jika mengembalikan false yang menunjukkan bahwa ia tidak mendukung penanaman PDF dalam HTML, maka kita akan beralih ke logika alternatif lain sebagaimana diperlukan. Periksa cuplikan kode di bawah ini untuk detailnya:

Keluaran

Output berikut menampilkan dokumen PDF yang tertanam dalam HTML:

Buat Mekanisme Cadangan

Kita dapat membuat mekanisme fallback saat menyematkan PDF di halaman web menggunakan PDFObject yang diaktifkan saat browser tidak mendukung penyematan PDF di HTML. PDFObject menggunakan parameter yang disebut fallbackLink yang berisi logika alternatif saat memanggil fungsi embed. Jadi, jika browser tidak mendukung penyematan PDF, kode yang ada di fallbackLink 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 saat browser tidak mendukung penyematan PDF dalam HTML.

Sematkan PDF dengan Parameter Pembukaan PDF Adobe

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

Keluaran

Cuplikan layar berikut menunjukkan dokumen PDF yang tertanam dalam HTML dengan parameter tambahan yang membuat elemen tertanam menggulir 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 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, lalu kita akan meneruskan parameter ForcePDFJS: true dan PDFJS_URL: path/to/viewer.html/in/pdf.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 menunjuk ke pustaka PDF.js.

Keluaran

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

Kesimpulan

Kesimpulannya, PDFObject adalah pustaka JavaScript yang mudah digunakan untuk menyematkan dokumen PDF dalam HTML. Meskipun tidak berfungsi sebagai perender dan bergantung pada dukungan browser untuk elemen sematan yang dapat menyebabkan masalah seperti UI yang rusak di browser yang tidak mendukung elemen sematan, pustaka tersebut memiliki fitur untuk mengatasi masalah tersebut melalui dukungan deteksi untuk elemen sematan dan mekanisme fallback. Kita juga dapat merender PDF di browser yang tidak mendukung elemen sematan dengan mengintegrasikan PDF.js dengan PDFObject. Meskipun memiliki keterbatasan, PDFObject menonjol sebagai alat yang berharga untuk menyematkan dan merender dokumen PDF di halaman web.

Produk Sejenis