Cara menggunakan html5 embed pdf

Berikut adalah cara untuk menyematkan (embed) dokumen pdf yang terdapat dalam Google Drive kita ke dalam blog atau website:


  1. 1. Bukalah dashboard Blogger dan juga file pdf yang ada di Googl Drive anda

  2. Cara menggunakan html5 embed pdf

    Cara menggunakan html5 embed pdf

  3. 2. Buatlah postingan atau bisa juga laman (page), dan tampilkan dengan mode html.

  4. Cara menggunakan html5 embed pdf

  5. 3. Bukalah preview dokumen pdf anda di Googe Drive. Caranya dengan klik kanan kemudian klik preview atau double klik saja dokumen pdf tersebut

  6. Cara menggunakan html5 embed pdf

  7. 4. Bukalah preview tersebut di jendela baru dengan klik ikon titik tiga di daerah pojok kanan atas

  8. Cara menggunakan html5 embed pdf

  9. 5. Setelah dokumen pdf terbuka di jendela yang baru, kliklah embed atau sematkan

  10. Cara menggunakan html5 embed pdf

  11. 6. Salinlah kode yang muncul setelah itu

  12. Cara menggunakan html5 embed pdf

  13. 7. Tempel atau pastekan kode yang disalin tadi ke postingan. Disarankan untuk merubah pengaturan lebar sematan (atribut width) menjadi dalam bentuk angka persen, misal 100% atau terserah, tujuannya adalah agar tampilannya nati menjadi responsive

  14. Cara menggunakan html5 embed pdf

  15. 8. Publikasikan dan selesai

  16. Cara menggunakan html5 embed pdf

Demikianlah cara untuk menyematkan dokumen pdf yang ada di Google Drive, kita sematkan di blog. Semoga bermanfaat, salam literasi....


Tulisan ini ditulis oleh Ahmad Fata untuk dipublikasikan di blog ahmadfata.blogspot.com dan man2kebumen.sch.id

🗓 Published at : January 01, 2021

Jika kita berselancar di dunia maya, kita sering menjumpai berbagai macam tipe file dokumen, seperti audio, picture, pdf, ppt, docx, dan lain sebagainya. Sebagai pelajar atau mahasiswa pasti sangat sering menemukan dokumen tersebut jika sedang mencari tugas di internet.

Orang-orang dapat menemukan file tersebut tidak lain karena sumbangsih dari  para author di Internet yang melakukan upload dokumen. Dokumen tersebut sejatinya hanya bisa di download, namun ada cara agar para penjelajah internet dapat menikmatnya tanpa harus melakukan download terlebih dahulu.

Nah, pada artikel ini, akan dibahas cara untuk menampilkan PDF tanpa JavaScript di Browser

Html Object element

Pada HTML, mungkin tidak banyak dari kita yang mengetahui sebuah element , dengan adanya element ini, kita dapat menanamkan (embed) file PDF yang kita miliki ke dalam HTML tanpa pustaka pihak ketiga. Caranya sangat mudah :

  1. Pastikan kita sudah memiliki URL file pdf yang ingin ditampilkan.
  2. Tambahkan attribute type dengan value application/pdf ke object element.
  3. Tambahkan attribute data dengan value URL pdf yang ingin ditampilkan ke object element.
  4. Set height and width sesuai keigininan.


  
    Embedding pdf
  
  
    

My pdf

Output - Menampilkan Pdf tanpa JavaScript

Cara menggunakan html5 embed pdf

Demo

https://stackblitz.com/edit/js-yuvqcj?embed=1&file=index.html

Want to start a conversation?

Send us an email at [email protected] We never stops checking our email and whatsapp, even though we could be sleeping or showering.

Get in touch

© 2022, Built with ❤️