Dalam artikel ini (bacaan lima menit), Anda akan belajar tentang dua hal sederhana (dan gratis. ) pendekatan untuk menampilkan PDF di browser dan bagaimana Anda dapat menerapkannya dengan cepat di situs web Anda
Rendering PDF Peramban Asli
Karena PDF adalah format yang banyak digunakan, semua browser modern memiliki dukungan PDF bawaan. Kami dapat memanfaatkan ini dengan menggunakan elemen HTML untuk menyematkan PDF langsung di halaman web kami, seperti ini
Ini kodenya
Saya telah menggunakan URL untuk nilai data dan src. Ini mengarah ke PDF yang ingin saya buka dari URL. Tapi saya malah bisa membuka file lokal dengan menukar URL untuk jalur file (mis. g. /path/to/file.pdf)
Antarmuka pengguna penampil PDF akan terlihat sedikit berbeda tergantung pada browser Anda
Penampil PDF Tersemat di Situs Web di ChromePenampil PDF Tersemat di Situs Web di SafariPendekatan ini akan berfungsi di semua versi desktop dan seluler modern dari Chrome, Safari, Firefox, dan Edge. (Ini tidak akan berfungsi di Internet Explorer. ) Jika Anda perlu mendukung Internet Explorer atau menyesuaikan antarmuka pengguna, Anda harus mempertimbangkan pendekatan berikutnya -- PDF. rendering js.
Sematkan PDF dalam HTML Dengan PDF Gratis. js Penampil Ekspres
PDF. js Express Viewer adalah PDF gratis. js viewer yang membungkus UI berbasis React modern di sekitar PDF open-source. mesin rendering js. PDF. js awalnya dikembangkan oleh Mozilla dan dikelola oleh komunitas sumber terbuka. PDF. js Express Viewer memungkinkan Anda merender PDF di dalam halaman web dengan menggunakan JavaScript alih-alih dukungan PDF bawaan browser
Manfaat PDF. js Express Viewer dibandingkan dengan rendering browser asli
- Dukungan Internet Explorer (selain semua browser modern)
- Antarmuka pengguna yang konsisten dan pengalaman pengguna di seluruh browser
- Antarmuka pengguna yang lebih dapat disesuaikan (misalnya, menghapus tombol unduh)
PDF. js Express Viewer Contoh HTML
Inilah yang akan kita buat setelah mengikuti tutorial ini
Menambahkan PDF. js Express Viewer ke situs web Anda adalah proses 3 langkah yang mudah. Di sini kami akan melakukan integrasi manual, namun kami memiliki panduan untuk mengintegrasikan PDF. js Express Viewer dengan banyak framework, termasuk React, Angular, Vue, dan banyak lagi. Anda dapat menemukan daftar lengkap panduan framework di sini
Langkah 1 - Unduh PDF. js Penampil Ekspres
Anda dapat mengklik di sini untuk mengunduh PDF. js Penampil Ekspres
Perhatikan bahwa untuk menggunakan PDF. js Express Viewer Anda memerlukan kunci lisensi gratis. Silakan dapatkan kunci Penampil gratis Anda di sini jika Anda tidak memilikinya
- Pindahkan folder PDF.js Express Viewer_ yang telah diekstrak ke dalam direktori proyek Anda
Setelah Anda memiliki file, buat halaman web ________4______ baru di direktori proyek yang sama. Sebut saja index.html dan rekatkan ini di dalamnya
Untuk mengimpor PDF. js Express Viewer sebagai modul CommonJS, lihat panduan ini untuk berintegrasi dengan NPM
Setelah Anda melakukan ini, contoh direktori proyek mungkin terlihat seperti ini
Di direktori contoh ini Anda dapat menambahkan folder. gambar, skrip, dan gaya untuk menyertakan sumber daya tambahan apa pun yang ingin Anda miliki di situs web Anda. Namun untuk proyek contoh ini, Anda hanya perlu mengekstrak folder lib dan file index.html yang baru saja kita buat pada langkah di atas
- Untuk membuat contoh PDF. js Express Web Viewer, tambahkan skrip ini di body setelah deklarasi div viewer
Cara termudah untuk menjalankan proyek ini adalah dengan src0. Untuk melakukannya, pastikan Anda memiliki Node. js diinstal
Selanjutnya buka terminal Anda dan instal src0 dengan perintah berikut
Setelah diinstal arahkan ke root direktori situs web Anda di terminal dan jalankan perintah berikut
Setelah menjalankan perintah itu, buka browser Anda dan ketik localhost. 8080. Anda kemudian harus melihat yang berikut ini
Langkah 3 - Gunakan PDF. js Express Viewer API untuk menyesuaikan penampil
Untuk menggunakan lebih banyak PDF. js Express API, Anda dapat menambahkan panggilan API di callback PDF. konstruktor js Express. Misalnya untuk mengubah tema PDF. js Express ke gelap, Anda dapat menambahkan
Refresh halaman aplikasi Anda (src_2) dan Anda akan melihat tema telah berubah
Kesimpulan
Kami harap ini membantu. Anda juga dapat melihat , yang memperluas fungsionalitas PDF. js Express Viewer dengan anotasi PDF, pengisian formulir, dan masuk ke dalam aplikasi web Anda