Teknik Menampilkan Dokumen Office di Web




Browser adalah teman kita berinternet sehari hari. Hampir semua yang kita lakukan di internet hanya mengandalkan satu program yaitu browser. Sebut saja baca Berita, Kirim email, Banking, Nonton Video, Chating dan transaksi online bisa dilakukannya. Namun ada hal penting yang tidak bisa dilakukan oleh browser yaitu menampilkan dokumen Office seperti Docx atau xlsx.

Jika kita menerima email, biasanya kita mendownload dulu attachmentnya baru dibuka dikomputer kita.Itu baru masalah bagi user, Bagaimana jika anda adalah programmer yang akan membuat elearning, elibrary atau sekedar menampilkan documen office di web tanpa harus mendownloadnya dan bisa tampil dengan sempurna di sembarang browser?

Yup, itulah yang akan kita bahas. Teknik yang saya ajarkan adalah menggunakan layanan Google Doc Viewer. Dengan menggunakan layanan tersebut, kita bisa membuka dokumen office disembarang browser. Letak File yang akan dibuka pun bisa diletakan diwebsite mana saja. Gunakan layanan Google Doc Viewer solusinya.

Snipet code

Berikut ini adalah contoh script untuk menampilkan dokument berbasis web dengan google doc viewer.

<iframe src="http://docs.google.com/viewer?
url=www.deakin.edu.au/help-wireless-android.pdf
&embedded=true" width="600" 
height="780" 
style="border: none;"></iframe>

Untuk dokumen lain caranya sama, cuma baris kedua saja yang harus diganti. Misalkan kita punya dokumen word di http://www.candra.web.id/demo/laporan.docx maka code diatas menjadi

<iframe src="http://docs.google.com/viewer?
url=http://www.candra.web.id/demo/laporan.docx
&embedded=true" width="600" 
height="780" 
style="border: none;"></iframe>

Gampangkan. Jika teknik ini digabungkan dengan PHP dan website digital library atau elearning, tentunya akan sangat bermanfaat. Hal yang perlu diperhatikan, karena cara ini menggunakan layanan viewer dari google, anda harus tetap terkoneksi internet walaupun website dipasang di intranet atau localhost.

Namun bagi anda yang sekedar ingin melihat isi sebuah dokumen diwebsite tanpa harus membuat scriptnya, silahkan gunakan Google doc viewer di https://docs.google.com/viewer . Halaman ini akan menghasilkan code secara otomatis, anda cukup memasukan alamat dokumennya lalu klik generate dan langkah terakhir adalah klik link “To view now Click here”.

Google Doc Viewer

Google Doc Viewer

Dokumen yang didukung

Document Viewer medukung puluhan format file. Berikut ini adalah format yang didukung oleh viewer ini.

  1. Google Docs
  2. Google Sheets
  3. Google Slides
  4. Google Forms
  5. Google Drawings
  6. Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
  7. Raw Image formats
  8. Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV, .ogg)
  9. Microsoft Word (.DOC and .DOCX)
  10. Microsoft Excel (.XLS and .XLSX)
  11. Microsoft PowerPoint (.PPT and .PPTX)
  12. Adobe Portable Document Format (.PDF)
  13. Tagged Image File Format (.TIFF)
  14. Scalable Vector Graphics (.SVG)
  15. PostScript (.EPS, .PS)
  16. TrueType (.TTF)
  17. XML Paper Specification (.XPS)

Demonya dong?

Silahkan coba demonya di disini

Tags:

7 thought on “Teknik Menampilkan Dokumen Office di Web”

  1. Muhsin Umar says:

    saya ingin bertanya, bagaimana caranya agar data yang tampil itu tidak bisa didownload? hanya ditampilkan saja. Terimakasih banyak atas ilmunya yg sangat bermanfaat

  2. Anonymous says:

    Very thank’s, ini yang namamnya info IT, dosen IT beneran (by.Eldo-Kebumen)

  3. yusuf says:

    gan, knpa pas sy praktekin sperti ini :
    Sorry, we were unable to find the document at the original source. Verify that the document still exists.
    You can also try to download the original document by clicking here.

    1. yusuf says:

      apa saya menggunakan Url localhost apa ya mas ? jadi file nya tidak bisa dibaca

    2. google doc viewer hanya bisa dipakai untuk document yang ada di domain web bukan di lokalhost

  4. IDS says:

    kalau tanpa google doc viewer bisa ga mas?mau bikin buat lokal di kantor soalnya :)

    1. dheendra7393 says:

      Koq tidak bisa ya “Tidak ada pratinjau yang tersedia”

Tinggalkan Komentar plz!