Html pdf viewer tanpa download

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

Pendekatan 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

1. Pindahkan folder PDF.js Express Viewer_ yang telah diekstrak ke dalam direktori proyek Anda

1. 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

1. 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

Bagaimana saya bisa melihat PDF tanpa mengunduhnya?

Bagaimana cara membuka PDF di browser alih-alih mengunduh HTML?

Bagaimana cara melihat PDF dalam HTML?

Bagaimana cara menampilkan PDF tetapi mencegahnya mengunduh dalam sudut?