Menampilkan File PDF pada Website dengan Embed HTML

Menampilkan File PDF pada Website dengan Embed HTML

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 

Leave a Reply

Your email address will not be published. Required fields are marked *