• About
  • Disclaimer
  • Privacy Policy
  • Contact Us
Mohsai, Berita teknologi
  • Website
  • Linux
  • Windows
  • Pemrograman
  • Laravel
  • Komputer
No Result
View All Result
  • Website
  • Linux
  • Windows
  • Pemrograman
  • Laravel
  • Komputer
No Result
View All Result
Mohsai
No Result
View All Result

Home » Pemrograman » HTML » Menampilkan File PDF pada Website dengan Embed HTML

Menampilkan File PDF pada Website dengan Embed HTML

by Saifuddin Romli
Maret 28, 2023
in HTML
Menampilkan File PDF pada Website dengan Embed HTML

Menampilkan File PDF pada Website dengan Embed HTML

Share on FacebookShare on Twitter

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.

Daftar Isi :

  • Browser-native HTML inline embedding
    • <embed>
    • <iframe>
    • Kelebihan
    • Kekurangan
  • Google Docs Viewer
    • Kelebihan
    • Kekurangan
  • Cara lain untuk embed PDF

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.

  • https://mozilla.github.io/pdf.js
  • https://pdfobject.com
  • https://viewerjs.org

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 

Previous Post

Membersihkan Harta Benda Dengan Zakat

Next Post

Aktivitas untuk anak-anak selama dirumah aja (PSBB)

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Recommended.

Apa itu HTML Sejarah dan Pengertian HTML

Apa itu HTML? Sejarah dan Pengertian HTML

Maret 28, 2023
6 Hal Yang Terlupakan Saat Asik Ngoding

6 Hal Yang Terlupakan Saat Asik Ngoding

Maret 28, 2023

Trending.

Cara mengaktifkan dan mematikan hyper-v di Windows

Cara Mengaktifkan Dan Mematikan hyper-v di Windows

Maret 28, 2023
Cara Menghapus Package Laravel dengan Composer

Cara Menghapus Package Laravel dengan Composer

Maret 29, 2023
CoreUI Pro Bootstrap Admin Template free

10+ Template Admin Bootstrap Gratis

Maret 28, 2023
Cara membersihkan atau hapus cache di Laravel

Cara membersihkan atau hapus cache di Laravel

Maret 29, 2023
Cara menjalankan Multiple Project dengan Setting Custom port di Laravel

Cara menjalankan Multiple Project dengan Setting Custom port di Laravel

Maret 28, 2023
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2023 Mohsai. All Rights Reserved

No Result
View All Result
  • Home
  • Review
  • Apple
  • Applications
  • Computers
  • Gaming
  • Gear
    • Audio
    • Camera
    • Smartphone
  • Microsoft
  • Photography
  • Security

© 2023 Mohsai. All Rights Reserved