Bagaimana cara merender dokumen Word (.doc, .docx) di browser menggunakan JavaScript?

Saya telah berhasil melakukan kode untuk menampilkan file PDF di browser alih-alih dialog "Buka / Simpan". Sekarang, saya terjebak mencoba untuk menampilkan dokumen Word di browser. Saya ingin menampilkan dokumen Word di Firefox, IE7 +, Chrome dll.

Adakah yang bisa membantu? Saya selalu mendapatkan dialog "Buka / Simpan" saat menampilkan dokumen Word di browser. Saya ingin menerapkan fungsi ini menggunakan JavaScript.

Saat ini tidak ada browser yang memiliki kode yang diperlukan untuk merender Dokumen Word, dan sejauh yang saya tahu, tidak ada perpustakaan sisi klien yang saat ini ada untuk merendernya juga.

Namun, jika Anda hanya perlu menampilkan Dokumen Word, tetapi tidak perlu mengeditnya, Anda dapat menggunakan Penampil Dokumen Google melalui a <iframe>untuk menampilkan yang di-host .doc/ jarak jauh .docx.

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

Solusi diadaptasi dari " Cara menampilkan dokumen kata menggunakan fancybox ".

Contoh:

JSFiddle

Namun, jika Anda lebih suka memiliki dukungan asli, di sebagian besar, jika tidak semua browser, saya sarankan menyimpan .doc/ .docxsebagai file PDF. Itu juga dapat secara independen diberikan menggunakan PDF.js oleh Mozilla.

Edit:

Terima kasih banyak kepada fatbotdesigns karena memposting penampil Microsoft Office 365 di komentar.

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

Satu peringatan penting lagi yang perlu diingat, seperti yang ditunjukkan oleh lightswitch05 , adalah bahwa ini akan mengunggah dokumen Anda ke server pihak ketiga. Jika ini tidak dapat diterima, maka metode tampilan ini bukan tindakan yang tepat.

Contoh Langsung:

Penampil Google Documents

Microsoft Office Viewer

Jawaban oleh Brandon dan fatbotdesigns keduanya benar, tetapi setelah menerapkan pratinjau Google docs, kami menemukan beberapa file .docx yang tidak dapat ditangani oleh Google. Beralih ke pratinjau MS Office Online dan karya suka pesona.

Rekomendasi saya adalah menggunakan URL Pratinjau MS Office di atas Google.

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' 

Tampaknya ada beberapa perpustakaan js yang dapat menangani .docx (bukan .doc) hingga sisi klien konversi html (tanpa urutan tertentu):

• https://github.com/lalalic/docx2html - docx to html, sebagian besar elemen didukung

• https://github.com/mwilliamson/mammoth.js - mendukung judul, daftar, tabel, catatan akhir, catatan kaki, gambar dan kotak teks

• https://www.npmjs.com/package/docx2html - Mengonversi dokumen DOCX ke HTML di browser atau nodejs

• https://github.com/artburkart/docx2html - tampaknya berfungsi di browser

^{Catatan: Jika Anda mencari cara terbaik untuk mengonversi file doc / docx di sisi klien, maka mungkin jawabannya adalah jangan lakukan itu . Jika Anda benar-benar perlu melakukannya maka lakukanlah sisi server, yaitu dengan libreoffice dalam mode headless , apache-poi (java) , pandoc atau apa pun perpustakaan lain yang paling cocok untuk Anda.}

Saya pikir saya punya ide. Ini juga membuat saya kesal dan saya masih kesulitan membuatnya ditampilkan di Chrome.

Simpan dokumen (name.docx) dalam kata sebagai halaman web file tunggal (name.mht) Dalam penggunaan html Anda

<iframe src= "name.mht" width="100%" height="800"> </iframe>

Ubah ketinggian dan lebar sesuai keinginan Anda.

ViewerJS sangat membantu untuk melihat / menyematkan format openoffice seperti odt, odp, ods dan juga pdf.

Untuk menanamkan dokumen openoffice / pdf

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/ adalah jalur ViewerJS

#../demo/ohm2013 adalah jalur file Anda ingin disematkan

Dokumen Asli (yang saya minati) membuat pemirsa (dan editor) khusus untuk dokumen Word (baik format lama .doc dan format docx modern). Ia melakukannya tanpa konversi lossy ke HTML. Inilah cara memulai https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Jika Anda ingin melakukan pra-proses file DOCX Anda, daripada menunggu sampai runtime Anda bisa mengubahnya menjadi HTML terlebih dahulu dengan menggunakan API konversi file seperti Zamzar . Anda dapat menggunakan API untuk secara programatik mengkonversi dari DOCX ke HMTL, menyimpan output ke server Anda dan kemudian menyajikan HTML itu kepada pengguna akhir Anda.

Konversi cukup mudah:

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

Ini akan menghapus dependensi runtime pada layanan Google & Microsoft (misalnya jika mereka turun, atau Anda dibatasi oleh mereka tingkat).

Ini juga memiliki keuntungan yang Anda dapat memperluas ke tipe file lain jika Anda inginkan (PPTX, XLS, DOC dll)