Membuat dokumen viewer online menggunakan OFFICE WEB APPS VIEWER

jasa pembuatan website terbaik dan terperaya dari surabaya

officelogo-100639225-large

           Hai Sobat semua apa kabar?? ini adalah kali pertama saya menulis disini dan juga kali pertama saya menulis di sebuah blog Sejujurnya saya pribadi juga masih bingung mau menulis tentang apa??hehehe… untuk awal tulisan saya kali ini saya akan mencoba memberikan tutorial tentang bagaimana cara menampilkan beberapa file dokumen secara online diatas website …

disini saya menggunakan Office Web Apps Viewer aplikasi ini dibangun oleh microsoft  yakk,, aplikasi ini adalah opsi lain aplikasi penampil dokumen secara onilne dari Google Docs Viewer milik google.Office Web Apps Viewer ini mampu menampilkan beberpa file seperti Word, Excel, ataupun File PowerPoint.

berikut ini cara menggunakan Office Web Apps Viewer:

http://view.officeapps.live.com/op/view.aspx?src=[FILE_URL]

Microsoft Office adalah perangkat lunak yang dikenal  terbaik . Hal ini telah terbukti digunakan oleh jutaan orang dan organisasi di seluruh dunia. Microsoft office menyediakan kemampuan untuk membuat segala sesuatu mulai dari dokumen, spreadsheet ke database yang sangat kompleks. Oleh karena itu dalam banyak kasus informasi dalam setiap organisasi disimpan dalam dokumen office. Jika Anda menginginkan informasi apapun tentang data atau neraca atau history pembelian , sebagian besar kasus, anda akan meminta perwakilan dari organisasi ataupun seseorang untuk mengirimkan file office dengan dokumen jenis (doc atau docx) atau spreadsheet (xls atau xlsx ).dengan hal ini dengan menggunakan Office Web Apps Viewer kita dapat membuka file dokumen dengan mudah tanpa harus mendownload.

 

KELEMAHAN DARI OFFICE WEB APPS VIEWER??

  • Dokumen Word dan PowerPoint  harus kurang dari 10 megabyte dan Excel harus kurang dari lima megabyte.
  • untuk mengkodekan URL yang mencakup ampersand (&), Anda harus menggunakan % 26 untuk karakter ampersand.Untuk informasi lebih lanjut tentang encoding URL di Percent-encoding on Wikipedia .
  • format yang didukung oleh Office webs apps viewer :
    • Word: docx, docm, dotm, dotx
    • Excel: xlsx, xlsb, xls, xlsm
    • PowerPoint: pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm

Step #1 HTML

Tahap pertama adalah kita harus membuat tampilan untuk html buat file html kurang lebih seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- button -->
<a href="javascript:void(0)" id="myDoc" data-url="https://view.officeapps.live.com/op/view.aspx?src=http://sinar-soft.com/wp-content/uploads/2016/08/BERKENALAN-DENGAN-NOSQL-REDIS.doc">
  BERKENALAN DENGAN NOSQL REDIS.doc
</a>
 
<!-- The Modal -->
<div id="myModal" class="modal">
 
  <!-- Modal content -->
  <div class="modal-content">
  
  <iframe id="iframe" width='500px' height='350px' frameborder='0'></iframe>
  </div>
 
</div>
</body>
</html>

 

Step #2 CSS

Selanjutnya adalah kita buat style menggunakan  CSS(cascading style sheets) kodenya seperti dibawah ini :

/* Modal (background) */
.modal {
    display: none; /* defaultnya adalah disembunyikan modal */
    position: fixed; /* posisinya tetap/fixed */
    z-index: 1; /* selalu diatas */
    padding-top: 100px; /*BOX */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* aktivkan scroll jika dibutuhkan */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    //background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

Step #3 JAVASCRIPT

Selanjutnya adalah kita buat file javascript seperti dibawah ini :

// elemen modal
var modal = document.getElementById('myModal');

// elemen a
var btn = document.getElementById("myDoc");

// mengambil attribute data-url di tag a 
var url =  btn.getAttribute("data-url");

// ketika user mengklik elemen a maka tampilkan modal
btn.onclick = function() {
    modal.style.display = "block";
    
    //var content = loadDoc(url);
    
    //disini saya menggunakan iframe untuk mengambil sebuah content milik 		Office Web Viewer
    // !!! cara ini tidak dianjurkan, karna dengan menggunakan iframe dari sisi sekuriti kurang baik 
   var iframe = document.getElementById("iframe");
    
    //lalu saya set attribute src ke variabel url yang sudah deklarasikan
    iframe.setAttribute("src", url);
    
}

// ketika user mengklik diluar modal maka modal akan menutup
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

untuk demo bisa dilihat DISINI

Dukung terus programer tanah air untuk berkarya!!
Sekian dan terima kasih

Leave a Reply

Your email address will not be published. Required fields are marked *