Embed File PDF di HTML Menjadi Responsive

Setelah membahas tentang cara menyisipkan media di HTML beberapa bulan lalu, saya pikir sekarang perlu memposting tentang cara menyisipkan file PDF di HTML siapa tau ada diantara temen-temen yang perlu. Tutorial ini bukan cuma menyisipkan / menyematkan PDF saja tapi juga dibuat responsive supaya tidak berantakan ketika dilihat di segala jenis perangkat.

Sebetulnya tidak berbeda jauh dengan penjelasan pada postingan tentang cara menyisipkan media di HTML, hanya saja yang membedakan nama tag yang digunakan. Untuk embed file seperti PDF ini kita bisa menggunakan object / iframe / embed, pilih aja mana yang lebih kamu sukai. Masing-masing tag tersebut hanya berbeda sedikit saja dalam cara penggunaannya, tapi saya sarankan untuk menggunakan iframe saja yang lebih umum dan mudah menyesuaikan.

Google Drive

Ko jadi ke Google Drive ? Ya, saya menyarankan untuk mengunggah file PDF-nya terlebih dahulu ke Google Drive agar tampilan menjadi lebih menarik dan agar tampilan file dapat disesuaikan. Silahkan kunjungi situs Google Drive kemudian login dengan akun Google kamu, gak punya akun Google ? Lihat disini bagaimana cara mendaftar akun Google.

Silahkan upload file PDF yang ingin ditampilkan ke Google Drive dan lihat file PDF tersebut di Google Drive, setelah berhasil di upload silahkan klik file tersebut dan pilih bagikan (Dapatkan tautan yang bisa dibagikan) pada ikon link di menu atas. Salin tautan tersebut dan paste di tempat aman, nanti kita akan memerlukan tautan ini.

Catatan: Pastikan setelan berbagi file tersebut dapat dilihat oleh semua orang

PDF Responsive

Mari lanjutkan ke codingan, silahkan buka file HTML dimana ingin menampilkan file PDF ini. Karena saya belum punya file-nya, jadi saja contohkan saja menampilkannya langsung di halamani index.html ya… Salin kode berikut:

<div id="tutorial-pdf-responsive" class="custom1">
  <div class="custom2">
     <iframe src="https://drive.google.com/file/d/0ByRtmxTgwFzlR0pxZjd4RUZMeEU/preview"></iframe>
  </div>
</div>

Ini hanya contoh saja, misalnya kamu sudah punya kolom div yang sudah disesuaikan silahkan gunakan itu saja tapi nanti style-nya tolong diikuti. Perhatikan pada tag iframe terdapat src=”” yang berisi url Google Drive, silahkan ganti id dengan id file yang tadi sudah di paste di tempat aman dari Google Drive.

Catatan: Hanya ganti id nya saja, contoh pada src diatas id nya adalah 0ByRtmxTgwFzlR0pxZjd4RUZMeEU

Sekarang, mulai mengatur style-nya. Kalo kamu menggunakan nama-nama class dan id sama seperti diatas, silahkan gunakan style ini:

.custom1 {
   margin-left: auto !important;
   margin-right: auto !important;
   margin: 20px;
   padding: 20px;
}
.custom2 {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 90%;
}
.custom2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#tutorial-pdf-responsive {
  max-width: 900px;
  max-height: 700px;
  overflow: hidden;
}

Jangan lupa untuk menyesuaikan nama id dan class jika kamu merubah namanya pada HTML. Save dan lihat hasilnya ! Jangan lupa untuk mengatur ukuran browser untuk memastikan hasilnya responsive.

Beberapa gaya yang perlu diperhatikan:

  • Silahkan tentukan max-width dan max-height sesuai kebutuhan situs web
  • Sesuaikan juga semua margin sesuai keperluan, margin yang digunakan ini supaya berada di posisi tengah
  • Jika kamu menggunakan pembungkus yang sudah ada di situs web, silahkan pindahkan gaya dari pembungkus ini (div) ke gaya pembungkus tersebut

Selamat mencoba !

BrowserFileHTML & CSSPDF
Komentar (0)
Tambah Komentar