Perpustakaan Penampil PDF JavaScript Sumber Terbuka

Apa itu PDF.js?

PDF.js adalah pustaka penampil PDF berbasis JavaScript dan HTML5 open source yang dikembangkan oleh Mozilla yang memungkinkan melihat dokumen PDF (Portable Document Format) di browser.

PDF.js mendukung beberapa fitur yang tercantum di bawah ini:

• Render PDF: Anda dapat membuka dan melihat, membaca, atau merender dokumen PDF di browser web.
• Cetak/Simpan PDF: PDF.js juga memungkinkan untuk mencetak atau menyimpan dokumen PDF dari browser web favorit Anda.
• Mode Presentasi: Dengan menggunakan mode Presentasi, Anda dapat menampilkan halaman PDF dalam layar penuh dan dapat menavigasi ke setiap halaman seperti slide presentasi.
• Navigasi PDF: PDF.js menyediakan kontrol navigasi yang lebih mudah untuk berpindah ke halaman berikutnya atau sebelumnya. Anda juga dapat dengan cepat melompat ke halaman yang diinginkan dengan memasukkan nomor halaman.
• Anotasi PDF: Anda juga dapat membuat anotasi pada dokumen PDF dengan menambahkan teks, gambar, atau gambar pada halaman PDF.
• Putar Halaman PDF: Dengan menggunakan PDF.js, Anda juga dapat memutar halaman PDF searah atau berlawanan arah jarum jam.
• Menggulir PDF: PDF.js menawarkan kontrol yang bagus untuk menggulir halaman secara horizontal atau vertikal, dll.
• Properti Dokumen PDF: Terakhir, Anda juga dapat melihat properti dokumen PDF dalam browser menggunakan penampil PDF.js.

Statistik GitHub

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

Memulai dengan PDF.js

Ada tiga cara untuk mendapatkan PDF.js dan mulai menggunakannya di proyek web Anda.

1. Bangun dari sumber

Anda dapat mengkloning repositori PDF.js dari GitHub dan membuatnya sendiri setelah menginstal Node.js, gulp dan dependensi PDF.js dengan mengikuti langkah-langkah di bawah ini:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

https://nodejs.org/en/download

npm install -g gulp-cli

npm install

gulp server

2. Gunakan distribusi yang sudah dibuat sebelumnya

PDF.js juga menawarkan distribusi bawaan beserta kode sumber yang dapat Anda temukan di rilis PDF.js di GitHub . Anda dapat mengunduh perpustakaan PDF.js yang sudah dibuat sebelumnya dan mulai menggunakannya.

3. Gunakan perpustakaan yang dihosting melalui CDN

PDF.js juga dihosting di server CDN gratis. Beberapa tautan dibagikan di bawah ini:

• https://cdnjs.com/libraries/pdf.js
• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://unpkg.com/pdfjs-dist

Jalankan Penampil PDF.js

Setelah Anda mengunduh dan mengekstrak pustaka distribusi bawaan dari GitHub, Anda akan menemukan dua folder: build dan web. File pustaka PDF.js dapat ditemukan di folder build sedangkan folder web berisi proyek penampil yang mencakup viewer.html, viewer.css, viewer.js, dan file terkait. Jika Anda memeriksa kode viewer.html, Anda dapat melihat bahwa kode tersebut mereferensikan pustaka pdf.js dari folder build dan file css dan js terkait lainnya juga.

Mari kita jalankan viewer.html di browser untuk melihat tampilan PDF.js viewer:

Render/Lihat Dokumen PDF

Untuk sekadar merender atau melihat dokumen PDF di browser menggunakan pustaka penampil PDF.js, kita harus menyertakan pustaka PDF.js ke dalam header dokumen HTML menggunakan tag script, tambahkan kanvas ke isi HTML lalu tambahkan kode JavaScript yang diperlukan untuk menggunakan pdfjsLib dan menjanjikan objek untuk menangani pemuatan dan rendering dokumen PDF yang tidak sinkron.

Kode di atas hanya memuat dokumen PDF di browser tanpa antarmuka pengguna atau kontrol seperti di bawah ini:

Demo Daring

Coba berfitur lengkap ini secara online Demo PDF.js Viewer untuk menjelajahi semua fitur perpustakaan PDF.js.

Kesimpulan

PDF.js adalah perpustakaan penampil PDF JavaScrpit sumber terbuka dan gratis dengan komunitas yang kuat. Ini memberikan dukungan lintas-browser untuk browser modern dan lama. Ya, pengalaman pengguna pada browser lawas mungkin tidak sama dengan browser modern namun tetap bagus sebagai perpustakaan gratis. Ini aman dan dapat disesuaikan. Fiturnya terbatas tetapi sebagai penampil PDF, ini berfungsi dengan baik.

PDF.js menyediakan API dan arsitektur yang bagus untuk membangun penampil PDF berbasis web. Karena menambahkan lebih banyak kontrol UI ke penampil memakan waktu sehingga menghemat waktu pengembang, PDF.js juga menyediakan kode sumber penampil PDF yang berfungsi penuh dan kaya fitur yang dapat Anda temukan (periksa viewer.html, viewer.js, dan viewer.css dll.) di folder web paket distribusi perpustakaan PDF.js.

Produk Sejenis