Ada beberapa cara untuk menampilakan file PDF di halaman website dengan HTML. JIka kalian ingin menampilkan file PDF di halaman website kalian. Menggunakan Tag HTML <embed> adalah cara termudah untuk menyematkan dokumen PDF di website kalian.
Cara lain untuk menampikaln file PDF adalah menggunakan Google Docs Viewer. Cara ini adalah pilihan terbaik karna compatible di berbagai jenis browser dan device.
Berikut tutorial cara menampilkan PDF dengan HTML di website.
Browser-native HTML inline embedding
Cara pertama adalah menggunakan tag <embed> dan framing file PDF dengan <iframe>. Berikut ini contoh html dan tampilannya.
<embed>
<embed src="https://mohsai.com/wp-content/uploads/2020/11/mohsai.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%" ></embed><iframe>
<iframe src="https://mohsai.com/wp-content/uploads/2020/11/mohsai.pdf#toolbar=0&navpanes=0&scrollbar=0" frameBorder="0" scrolling="auto" height="100%" width="100%" ></iframe>Kelebihan
- Tidak ada batasan ukuran file PDF (bahkan ratusan MB)
- Loading lebih cepat
Kekurangan
- Tidak berfungsi di browser seluler
Google Docs Viewer
Pada cara kedua ini kita akan menampilakn file PDF menggunakan google docs viewer yang di framing. Cara ini mempunyai kelebihan yaitu berjalan dengan baik di desktop dan mobile. Berikut ini contoh html dan tampilannya.
<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://mohsai.com/wp-content/uploads/2020/11/mohsai.pdf#toolbar=0&scrollbar=0" frameBorder="0" scrolling="auto" height="100%" width="100%" ></iframe>Kelebihan
- Berfungsi di desktop dan browser seluler
Kekurangan
- Batas file 25MB
- Membutuhkan waktu tambahan, karena untuk mengunduh viewernya itu sendiri
Cara lain untuk embed PDF
Selain menggunakan cara diatas, ada cara lain untuk menampilkan file PDF. Yaitu mengunakan library atau javascript, berikut ini ada beberapa library yang saya rekomendasikan. Kalian bisa buka link dibawah ini dan melihat documentation nya untuk menggunakan library tersebut.
Jika kalian masih bingung tentang tutorial diatas kalian bisa menanyakannya dikolom komentar.
Semoga artikel tentang Menampilkan File PDF pada Website dengan Embed HTML diatas bermanfaat.
NOTE
Pastikan X-Frame-Options HTTP response header. Harus SAMEORIGIN. X-Frame-Options SAMEORIGIN
