Membuat preview file office (word,excel,powerpoint) pada website

Saya punya tugas aplikasi untuk membuat semacam aplikasi pengarsipan dokumen berbasis web. Alhamdulillah, aplikasinya sudah berhasil melakukan pengarsipan file2, mulai dari upload hingga download.

namun, yang menjadi masalah saat ini, saya ingin menambahkan preview file tersebut melalui web tanpa di download.

Saya telah membaca beberapa artikel dan mennton video pada youtube, saya menemukan library phpoffice, namun setelah saya membaca dokumentasi dan mencoba mempraktekkannya, ternyata librarynya hanya dapat membuat file dokumen saja namun tidak bisa menampilkan file tersebut kedalam bentuk preview langsung pada website.

Untuk itu, mungkin ada teman-teman sekalian yang pernah mengalami kasus yang sama dan telah menemukan solusinya, mohon pencerahannya bagaimana solusi yang dapat saya gunakan untuk menampilkan file yang telah diupload tersebut pada website secara langsung tanpa di download.

terima kasih sebelumnya :)

avatar AlifNur
@AlifNur

164 Kontribusi 72 Poin

Diperbarui 3 tahun yang lalu

2 Jawaban:

<div>Coba pakai library <a href="http://js-grid.com/">jsGrid</a> atau <a href="https://handsontable.com/">Handsonetable</a>&nbsp;2 library itu mirip view Excel yang bisa diedit data nya via web browser</div>

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 3 tahun yang lalu

Tanggapan

Terimakasih mas @ahanafi atas jawabannya.. saya coba dlu mas

Jawaban Terpilih

<div><br>Yup, harus di-internet lokasi file-nya.<br>Karena kita mengirimkan lokasi file-nya dan tentu viewer-nya harus bisa membaca file tersebut.<br><br>untuk lokasi di-public internet banyak pilihan.<br>Seperti <a href="https://netlify.com">netlify</a>, <a href="https://pages.github.com/">github pages</a>, <a href="https://about.gitlab.com/direction/release/pages/">gitlab pages</a> dan lainnya.<br><br>kalau mau pakai localhost, bisa juga pakai <a href="https://ngrok.com/">Ngrok</a>.<br>pernah tulis soal ini, lihat ke <a href="https://www.codepolitan.com/ngrok-5b289135af2f1#">artikel Ngrok</a>.<br><br>-----------------------------------------------------------------------------<br><br>Kalau dibilang tidak download, tidak juga.<br>karena viewer-nya butuh file tersebut.<br>Mungkin tidak download ke browser/device user-nya.<br><br><a href="https://www.url-encode-decode.com/">Encode</a> dulu link file-nya, contoh&nbsp;</div><div><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;AlifNur_EncodeUri.png&quot;,&quot;filesize&quot;:44876,&quot;height&quot;:220,&quot;url&quot;:&quot;https://i.ibb.co/4fZM5YY/Alif-Nur-Encode-Uri.png&quot;,&quot;width&quot;:1922}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/4fZM5YY/Alif-Nur-Encode-Uri.png" width="1922" height="220"><figcaption class="attachment__caption"><span class="attachment__name">AlifNur_EncodeUri.png</span></figcaption></figure><br>Pakai link dibawah dengan iFrame:<br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;AlifNur_IFrame.png&quot;,&quot;filesize&quot;:180295,&quot;height&quot;:544,&quot;url&quot;:&quot;https://i.ibb.co/PQ6FG2W/Alif-Nur-IFrame.png&quot;,&quot;width&quot;:2048}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/PQ6FG2W/Alif-Nur-IFrame.png" width="2048" height="544"><figcaption class="attachment__caption"><span class="attachment__name">AlifNur_IFrame.png</span></figcaption></figure></div><div>Contoh:<br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;AlifNur_Sample.png&quot;,&quot;filesize&quot;:70120,&quot;height&quot;:1016,&quot;url&quot;:&quot;https://i.ibb.co/WgP6LhR/Alif-Nur-Sample.png&quot;,&quot;width&quot;:1031}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/WgP6LhR/Alif-Nur-Sample.png" width="1031" height="1016"><figcaption class="attachment__caption"><span class="attachment__name">AlifNur_Sample.png</span></figcaption></figure><br><br><br></div>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 3 tahun yang lalu

Tanggapan

berarti ini filenya mesti di hosting dlu yah mas? soalnya udah coba dari localhost filenya ngk bisa ke detect..

update jawaban diatas.

siap mas dicoba dlu pake ngrok.. soalnya baru jg tau soal ngrok

Alhamdulillah udah berhasil mas.. makasih banyak mas bantuannya

Login untuk ikut Jawaban