Cara Embed PDF pada HTML

14/11/2017    Maykhel David    43     Website

Umumnya, hyperlink digunakan untuk menghubungkan dokumen PDF yang akan ditampilkan di browser. Anchor link HTML (tag <a>) adalah cara termudah untuk menampilkan file PDF pada browser. Tapi jika ingin menampilkan dokumen PDF secara langsung di halaman web, file PDF perlu disematkan di HTML. Tag HTML <embed> adalah tag yang paling tepat digunakan untuk menampilkan dokumen PDF di halaman web. Dalam tutorial ini, saya akan menunjukkan cara menampilkan file PDF di halaman web menggunakan tag HTML <embed>.

Tag <embed> HTML memiliki fungsi utama, yaitu untuk memuat atau menampilkan konten eksternal. Parameter berikut dapat ditentukan dalam tag <embed>.

    src - Menentukan jalur file eksternal untuk disematkan.
    type - Menentukan jenis media konten yang disematkan.
    width - Menentukan lebar konten yang disematkan.
    height - Menentukan tinggi konten yang disematkan.

Selanjutnya kuta akan coba menampilkan sebuah file PDF pada halaman website. Gunakan kode berikut untuk menanamkan file PDF di halaman web HTML.

<embed src = "folder/majalah.pdf" type = "application / pdf" width = "100%" height = "600px" />

Sekarang kita akan mencoba mengatur tampilan dokumen PDF di halaman web. Dengan menggunakan parameter di URL, Kita dapat menentukan dengan tepat apa yang akan ditampilkan dan bagaimana hasil tampilan dokumen PDF.

Parameter berikut biasanya digunakan untuk embed file PDF dalam HTML atau terbuka di browser.

    page = pagenum - Menentukan nomor (integer) halaman dalam dokumen. Halaman pertama dokumen memiliki nilai pagenum 1.
    zoom = scale - Mengatur faktor zoom dan scroll, menggunakan nilai float atau integer. Misalnya, nilai skala 100 menunjukkan nilai pembesaran 100%.
    view = Fit - Mengatur tampilan halaman yang ditampilkan.
    scrollbar = 1 | 0 - Mengaktifkan atau menonaktifkan scrollbar.
    toolbar = 1 | 0 - Mengaktifkan dan menonaktifkan toolbar.
    statusbar = 1 | 0 - Mengaktifkan atau menonaktifkan status bar.
    navpanes = 1 | 0 - Menghidupkan dan mematikan panel navigasi dan tab.

Menentukan Parameter di URL

Anda dapat menentukan beberapa parameter dalam URL. Setiap parameter harus dipisahkan dengan karakter ampersand (&) atau pound (#). Tindakan yang dilakukan dari kiri ke kanan dan tindakan selanjutnya akan menggantikan tindakan sebelumnya.

URL dengan parameter terlihat seperti berikut.

http://dumetschool.com/doc.pdf#Chapter5
http://dumetschool.com/doc.pdf#page=5
http://dumetschool.com/doc.pdf#page=3&zoom=200,250,100
http://dumetschool.com/doc.pdf#zoom=100
http://dumetschool.com/doc.pdf#page=72&view=fitH,100

Nonaktifkan dan Sembunyikan Toolbar di Penampil Web PDF

Contoh ini menunjukkan cara menyembunyikan atau menghapus toolbar, navpanes, dan scrollbar file PDF yang dibuka di HTML <embed> dengan menggunakan parameter di URL.
Gunakan kode berikut untuk menanamkan dokumen PDF di halaman web dan hapus atau sembunyikan toolbar dari PDF yang ada.

<embed src="folder/majalah.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="600px" />

Baiklah teman-temandiatas adalah sedikit penjelasan tentang bagaimana cara

HTML CSS, Tips dan Trik

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More