Bagaimana cara membuka file pdf di javascript?

Pada tugas terbaru saya, saya dihadapkan pada tantangan mengunduh file pdf dari API dan menampilkannya di browser

Biasanya, API akan menyediakan objek json dengan tautan ke pdf, yang kemudian dapat digunakan untuk membuka tab/jendela browser baru dan browser atau platform menangani sisanya

Namun dalam hal ini API dirancang untuk aplikasi seluler asli dan memerlukan kehadiran header http 'api-key' khusus, yang membuatnya tidak mungkin untuk hanya memberikan url ke browser

Untuk mengatasinya, perlu mengunduh file ke memori dengan permintaan XHR dan kemudian membuka browser atau mengunduhnya dengan plugin/UI apa pun yang biasanya digunakan untuk file pdf

Untuk permintaan XHR, kami menggunakan Fetch API dengan polyfill whatwg-fetch. Intinya metode Fetch API fetch() mengembalikan respons, dari mana blob dapat dibuat. Objek blob ini dapat digunakan untuk membuat objectURL, yang kemudian dapat digunakan sebagai href dalam sebuah link

Dalam artikel ini (bacaan tiga menit), Anda akan mempelajari cara menyematkan PDF dengan cepat di halaman web menggunakan PDF. js, penampil PDF sumber terbuka yang populer

Kami juga akan menggunakannya sebagai penampil PDF layar penuh tempat kami dapat mengirimkan nama file PDF melalui string kueri URL. Coba penampil layar penuh di sini

Langkah 1 - Unduh dan Ekstrak PDF. Paket js

Mari menuju ke GitHub untuk kemudian mengekstrak konten di dalam folder situs web kita

Berikut adalah isi dari .zip

Setelah mengekstrak konten .zip_, folder situs web kita akan terlihat seperti ini

Catatan. Karena pembatasan keamanan browser, PDF. js tidak dapat membuka PDF lokal menggunakan URL file://. Anda harus memulai server web lokal atau mengunggah file ke server web Anda

Langkah 2 - Sematkan Penampil PDF di Situs Web

Langkah terakhir kami adalah menyematkan penampil di halaman web kami dengan menggunakan . Kami akan menggunakan string kueri untuk memberi tahu penampil PDF file PDF mana yang akan dibuka. Seperti ini

Kamu sudah selesai

Jika Anda ingin memuat file PDF dari nama domain yang berbeda, Anda perlu memastikan bahwa server yang menghosting PDF telah disiapkan untuk CORS

Penampil PDF Layar Penuh

Selain menyematkan penampil di halaman, kami juga dapat membukanya di layar penuh

Ini kodenya

Cukup ubah parameter string kueri file untuk membuka PDF apa pun yang ingin Anda buka

Kami juga dapat mengatur ulang bilah alat dengan memindahkan elemen, menghapus tombol, dan mengubah ikon

Mari buka public/lib/web/viewer.html_ dan tambahkan yang berikut ke bagian

Selanjutnya, kita akan membuat customToolbar.js di dalam folder public/lib/web dan tambahkan kode berikut

PDF. Bilah alat utama js dipecah menjadi 3 wilayah

Bilah alat sekunder diakses melalui ikon chevron di wilayah yang tepat

Kita dapat memindahkan elemen dari bilah alat sekunder ke bagian kiri, tengah, atau kanan bilah alat utama dengan fungsi addElemFromSecondaryToPrimary di customToolbar.js. Misalnya, menghapus tanda komentar pada baris ini akan memindahkan alat rotasi berlawanan arah jarum jam ke bagian kiri bilah alat utama

Jika Anda ingin memindahkan .zip1 ke wilayah tengah, ganti .zip2 dengan .zip3, atau .zip4 untuk wilayah yang tepat. Untuk memindahkan alat yang berbeda, ganti ID .zip1 dengan ID elemen yang ingin Anda pindahkan. (Lihat di bawah untuk daftar lengkap ID elemen. )

Kita juga bisa menyembunyikan elemen seperti ini

Untuk menyembunyikan elemen yang berbeda, ganti .zip6 atau .zip7 dengan ID elemen

CATATAN. Menyembunyikan tombol unduh dan cetak bukanlah cara antipeluru untuk melindungi PDF kami, karena masih memungkinkan untuk melihat kode sumber untuk menemukan file. Itu hanya membuatnya sedikit lebih sulit

Kami juga dapat menyesuaikan ikon untuk berbagai alat dengan menukar file .zip8, seperti ini

Dalam contoh di atas, .zip_9 adalah ID elemen, sedangkan file://0 adalah jalur ke ikon alat

Dan itu saja

Referensi ID Elemen untuk PDF. js Kustomisasi Antarmuka Pengguna

Berikut referensi praktis dengan ID dari berbagai ikon bilah alat

Langkah selanjutnya

Sekarang setelah Anda mendapatkan PDF Anda. js penampil dan berjalan, pertimbangkan tutorial berikut

Kesimpulan

Seperti yang Anda lihat, membuat penampil PDF dasar dengan PDF. js cukup mudah. Jika Anda memerlukan kemampuan tambahan, seperti anotasi PDF, mengisi formulir, atau tanda tangan elektronik, pertimbangkan PDF. js Express, yang menyediakan PDF. penampil berbasis js dengan anotasi out-of-the-box, pengisian formulir PDF, dan penandatanganan

Bagaimana cara membuka PDF dengan JavaScript?

Bisakah JavaScript berfungsi dalam PDF?

Bagaimana cara membuka PDF langsung di browser?

Bagaimana cara membuat penampil PDF dalam HTML?