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


146

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.



Anda dapat menggunakan syncfusion-document-editor sebagai reaksi untuk menunjukkan dan mengedit file docx
Yusuf Mohammad

Jawaban:


225

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


2
@Pankaj Anda tidak perlu mengunggahnya ke Google Drive. Anda bisa mengubah urlparamteter menjadi URL lengkap menjadi file .doc, baik yang dihosting di server Anda, atau di mana pun ia dapat langsung ditautkan. Google Documents menangani konversi ke format yang dapat ditangani oleh browser dengan cepat, dan tidak mengharuskannya diunggah atau disimpan di Google Documents, alih-alih melakukan permintaan sisi server untuk mengambil file.
Brandon Anzaldi

3
@Pankaj Bahkan jika Anda meng-hosting server lokal, Google tidak dapat mengakses localhost. Perlu URL yang dapat diakses secara publik. Anda dapat menggunakan layanan penerusan dasar seperti Finch .
Brandon Anzaldi

11
Anda juga dapat menggunakan penampil aplikasi Office Live: //view.officeapps.live.com/op/embed.aspx?src=your_url_di sini, tempatkan url ini di iframe
fatbotdesigns

1
@BonifacePereira Jika Anda mengatur intranet, Anda mungkin harus melakukan beberapa konversi secara lokal, karena GDocs dan Live harus mengambil dokumen dari suatu tempat. Jika Anda bisa, Anda mungkin dapat mengatur server untuk konversi dengan OpenOffice atau sesuatu: stackoverflow.com/questions/5538584/…
Brandon Anzaldi

18
Hanya ingin menunjukkan bahwa kedua metode ini pasti mengunggah file ke server Google dan Microsoft. Jika Anda berurusan dengan informasi sensitif yang seharusnya memiliki akses terbatas - jangan lakukan ini. Gunakan solusi alternatif dengan PDF.js untuk menghasilkan versi file PDF untuk dilihat di browser dan menawarkan tautan untuk mengunduh berbagai versi excel / doc.
lightswitch05

30

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' 

1
Apakah ada batasan untuk menggunakan ini? support.microsoft.com/en-us/help/2769380/…
Wisnu

untuk memberikan narasi tandingan - kami memilih versi google karena penyaji microsoft membutuhkan waktu lebih lama untuk dimuat di chrome dan ff
David Holiday

13

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

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.


1
Saya akan perhatikan bahwa perpustakaan saya sepenuhnya tidak terawat. Itu dapat mengkonversi file docx ke sesuatu yang dapat di-render di browser. Saya tidak tahu apakah ini benar lagi.
artburkart

2

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.


6
@guidomocha Jangan hanya berkomentar, berikan alasan mengapa ini adalah pendekatan yang buruk.
J. Louw

2

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


Haruskah saya dapat menggunakan url tautan dari aws s3
Wisnu

Tidak, Anda Hanya Menyediakan Tautan Lokal
NaveenDA

1
Terima kasih atas tanggapan Anda
Wisnu

Sayangnya dalam konteks saya format microsoft lebih luas.
guettli

1

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


2
Tidak ada informasi tentang harga. Apakah 'Word File Editor / Viewer' gratis?
FiringBlanks

Ini perangkat lunak komersial, tetapi kami memiliki paket gratis untuk startup / usaha kecil, dan untuk yang lain, paket gratis dikenakan batasan penggunaan. Kami akan segera mempublikasikan detail.
JasonPlutext

dapatkah ini berjalan pada satu halaman tanpa server misalnya pada aws s3?
Graham Chiu

sisi server kami mengemasnya sebagai wadah Docker yang harus Anda jalankan di suatu tempat (misalnya ECS). (Pada prinsipnya kita bisa menjalankan beberapa ini di Lambda, tetapi Anda masih menginginkan toko dokumen gigih, mungkin S3)
JasonPlutext

3
@JasonPlutext Ini terlihat menarik. Tapi saya akan berterus terang: Saya bersedia membayar sedikit biaya masuk akal untuk paket atau layanan yang baik - tetapi "kirimkan info Anda dan kami akan memberi tahu Anda berapa biayanya" adalah TIDAK ADA .
manassehkatz-Moving 2 Codidact

0

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)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.