Artikel Teknologi

Cara Gampang Banget Menampilkan PDF di HTML: Panduan Super Lengkap

Hi, guys! Situ pasti udah nggak sabar kan, pingin tau cara nampilin PDF di HTML dengan mudah? Gapapa, tenang aja, ada di artikel yang pas, kok. Kita bakal lakuin pembahasan keren ini bareng-bareng, biar kamu ngerti hingga performance websitemu, OK!

A. Cara Dasar Menampilkan PDF di HTML

Sebelum kita makin jauh, kita bakal kupas tuntas dulu nih cara-cara dasar buat nampilin PDF di HTML. Jangan cuma asal copy-paste yang bikin kepala pusing, 7 keliling, belajar dulu biar oke, deh. Yuk, kita eksplor bareng!

1. Pake Tag Iframe aja, Bro

Yang pertama itu adalah pake tag iframe. Gampang banget, sob, pake tag ini, PDF di HTML bisa so sweet kek jatuh cinta yg pertama kali tuh. Jadi kita bisa nampilin file PDF dari server kita sendiri atau dari tautan eksternal lain. Contohnya:

<iframe src="contoh.pdf" width="100%" height="600px" frameborder="0"></iframe>

Nah, kalo pake tag iframe gini, emang simpel banget sih. Tapi, adakah yang sempurna di dunia ini?
Belom tentu, lho. Karena, selain kelebihannya yang mantap jiwa, tag iframe punya kekurangan juga nih:

  • Terbatas soal fitur buat ngatur tampilannya.
  • Kekakuan, bro, dalam hal responsif atau keluwesan di berbagai jenis layar.
  • Ada tren penggunaan smartphone, dong, yang harus kamu perhatikan.
  • Buat beberapa versi peramban atau device, kadang nggak semuanya mantap dipakai.

2. Cobain juga Tag Embed, atau Object?

Selera orang beda-beda. Jadi, lihat juga nih tag embed atau object. Jadi, kalau kamu mau nampilin PDF dengan cara ini, tag embed atau object nya tinggal ditaruh aja di kode HTML, gitu. Contohnya kaya gini:

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

atau

<object data="contoh.pdf" type="application/pdf" width="100%" height="600px"> 
  <p>Ups! PDF nya nggak bisa ditampilkan, <a href="contoh.pdf">download disini</a> yuk!</p>
</object>

Meskipun nampilin PDF dengan cara ini juga bisa jadi solusi, tapi ada aja, deh, yang bikin kita harus berpikir dua kali:

  • Kekurangan fitur tampilan juga nih.
  • Walaupun keren, ternyata responsifitas nya juga nggak terlalu oke.
  • Harus lebih aware aja, Sob, sama peramban yang bisa dan nggak bisa nampilin PDF pakai tag ini.

3. Nampilin aja jadi Gambar

Hmm, ini juga cara simpel yang bisa kamu coba, tuh. Pake cara ini, kita bisa convert dulu halaman PDF jadi gambar, baru deh embed gambar-gambar itu ke HTML. Contohnya:

<img src="contoh-halaman-1.jpg" alt="Halaman 1" />
<img src="contoh-halaman-2.jpg" alt="Halaman 2" />

Ternyata, segala sesuatu ada hikmahnya, dong, termasuk menampilkan PDF dalam bentuk gambar ini. Mau tau kelebihan dan kekurangannya?

Kelebihan:

  • Kompatibel sama semua device dan peramban, ngejaga hati mu agar tak terluka~
  • Responsif, compatible di berbagai jenis layar, keren euy!

Kekurangan:

  • Sayangnya, nggak interaktif nih, Sob. Jadi, nggak bisa milih teks atau nyari halaman spesifik gitu.
  • Pengerjaannya agak ribet, deh. Convert PDF ke gambar satu-satu? Malesin!

B. Plug-in dan Alat untuk Menampilkan PDF di HTML

Mending up aja, Sob. Jangan cuma top global di game, plug-in dan alat buat nampilin PDF juga biar update. Biar keren, kita perkenalkan buat kamu jagoanku beberapa pilihan plug-in dan alat yang mainnya di tingkat atas!

1. Infonya Mantap Jiwa, PDF.js

Cobain deh pake PDF.js, selain untuk memperkukuh nama dewa Zeus, fitur-fiturnya juara banget:

  • Open-source, dari anak desa menjadi presiden.
  • Dibikin langsung sama Mozilla, sang legenda sangkuriang.
  • Kompatibel sama banyak peramban dan device, anak panah apel gitu.

Yuk, nih, kita coba pake PDF.js buat nampilin PDF, rapi dan oke:

  1. Download dulu PDF.js, klik sini ya.
  2. Tes tiriskan hasil download, dan taruhlah di folder yang mantap.
  3. Oke, selanjutnya tinggal tambahin kode berikut ke halaman HTML nya:
 <head>
    ...
    <script src="folder_kamu/pdf.js"></script>
    <script src="folder_kamu/pdf_viewer.js"></script>
    <link rel="stylesheet" href="folder_kamu/pdf_viewer.css" />
    ...
  </head>
  <body>
    ...
    <div>
      <canvas id="pdfViewer"></canvas>
    </div>
    <script>
      pdfjsLib.getDocument("contoh.pdf").promise.then(function(pdf) {
        return pdf.getPage(1);
      }).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport({ scale: scale });
        var canvas = document.getElementById("pdfViewer");
        var context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    </script>
    ...
  </body>

Wow, nge-blend banget-sumpah-HTML nya! Tapi, tentunya ada kelebihan dan kekurangan PDF.js ini, yaitu:

Kelebihan:

  • Tampilannya mantap, bisa ditampilkan baik di zoom-in maupun zoom-out. Mirip dewa siapa hayo?
  • Interaktif, fitur nya kayak PDF viewer gitu yang asli.
  • Kompatibel kabeh, ya. Cuco buat ngeberet hati para peramban dan device.

Kekurangan:

  • Yah, sabar aja, Sob. Soalnya performa-nya suka ngebuat hati penonton down karena kadang berat.

2. Serasa Nonton Film ViewerJS

Coba deh main main pake ViewerJS. Ah, selain namanya yang kayak nonton film, fitur-fiturnya juga oke punya:

  • Oke dalam hal PDF, tetapi juga bisa loh untuk dokumen yang lain.
  • Viewer yang bebasis JavaScript, licin kayak dipijet.
  • Biar nggak jadi mainan hati, ia bisa ngecheck peramban yang dapat dan nggak menampilkan PDF.

Cara menggunakan ViewerJS ini, yuk kita coba bareng:

  1. Download ViewerJS nya lewat link ini yak.
  2. Ketik jurus taruh folder ViewerJS ke direktori webmu.
  3. Nah, sekarang tinggal pasang kode berikut di pilar utama HTML-mu:
<iframe src="ViewerJS/#../pdf/contoh.pdf" width="100%" height="600px" allowfullscreen webkitallowfullscreen></iframe>

Penasaran sama kelebihan dan kekurangan ViewerJS ini?

Kelebihan:

  • Serbaguna dalam menampilkan berbagai jenis dokumen.
  • Tampilannya oke, bisa dibilang PDF viewer kelas atas, gaya!
  • Mampu menangani berbagai ukuran dokumen dan zoom.
  • Terbilang ringan, berasa nyender dibahu doi, deh.
  • Open-source bukan tutup mulut, kami bagikan untukmu.

Kekurangan:

  • Gempor dikit, yaitu dukungan terhadap font yang belom 100%.

3. Jangan Lupa, Google Drive PDF Viewer

Jangan ketinggalan Google Drive PDF Viewer nih, soal fitur juga kekinian banget:

  • Udah pasti kompatibel dengan banyak peramban dan device, karena Google namanya.
  • Gampang nyatanya, karena tinggal taruh PDF, terus bikin tautan publik.
  • Kebetulan juga, kita bisa gunakan tautan ini untuk nampilin PDF di HTML.

Cara menggunakan Google Drive PDF Viewer:

  1. Sobat Google, upload dan simimpan dulu tuh file PDF ke Google Drive-mu saking akur nya.
  2. Setelah itu, klik kanan pada file dan pilih "Dapatkan Tautan", pastikan share status "Siapa pun dengan tautan".
  3. Selanjutnya, tinggal tambahkan kode berikut dengan mengganti LINK_GOOGLE_DRIVE dengan tautan yang kamu dapat dari file PDF bara tadi:
<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=LINK_GOOGLE_DRIVE" width="100%" height="600px" frameborder="0"></iframe>

Kelebihan dan kekurangan Google Drive PDF Viewer itu berarti ada, lho!

Kelebihan:

  • Solusi yang nyaman, berkat dukungan Google yang legendaris.
  • Kompatibel dengan hampir semua peramban dan device.

Kekurangan:

  • Ya pasti ada, Sob, yaitu, harus login ke akun Google Drive.
  • Terbatas oleh kuota penyimpanan Google Drive, jadi jangan ngabisin mindspace, ya.

C. Memilih Metode yang Tepat

Udah banyak kan, cara buat menampilkan PDF di HTML yang kita bahas? Iya dong, biar kamu nggak kebingungan pilih yang mana, kita pisah tuuh:

  • Pertimbangkan kebutuhan situs Anda.
  • Evaluasi kompatibilitas peramban, biar nggak senggol bacok.
  • Pertimbangkan kualitas tampilan PDF, biar tatapannya jelas.
  • Ini nih yang penting, pertimbangkan juga kecepatan, performa, dan keamanan.

Kesimpulan

Keren kan, Sob? Kemampuan nampilin PDF di HTML ternyata nggak sulit juga, banyak opsi yang bikin kamu kagum. Kamu tinggal pilih metode yang pas buat kebutuhan situsmu, dan kamu juga bisa eksplor lebih jauh nih metode atau plug-in supaya hasil lebih maksimal lagi. Yuk abisin waktu ngertiin, sampe menjelma menjadi dewa PDF di HTML. Good luck, bro!

Comments

Artikel Terbaru