ฉันจะแสดงเอกสาร Word (.doc, .docx) ในเบราว์เซอร์โดยใช้ JavaScript ได้อย่างไร

ฉันได้ทำโค้ดสำเร็จเพื่อแสดงไฟล์ PDF ในเบราว์เซอร์แทนที่จะเป็นกล่องโต้ตอบ "เปิด / บันทึก" ตอนนี้ฉันกำลังพยายามแสดงเอกสาร Word ในเบราว์เซอร์ ฉันต้องการแสดงเอกสาร Word ใน Firefox, IE7 +, Chrome เป็นต้น

ผู้ใดช่วยได้บ้าง ฉันมักจะได้รับกล่องโต้ตอบ "เปิด / บันทึก" ในขณะที่แสดงเอกสาร Word ในเบราว์เซอร์ ฉันต้องการใช้ฟังก์ชันนี้โดยใช้ JavaScript

ปัจจุบันไม่มีเบราว์เซอร์ที่จำเป็นต้องใช้รหัสในการแสดงผลเอกสาร Word และเท่าที่ฉันทราบไม่มีไลบรารีฝั่งไคลเอ็นต์ที่ปัจจุบันมีอยู่สำหรับการแสดงผล

อย่างไรก็ตามหากคุณต้องการแสดงเอกสาร Word แต่ไม่จำเป็นต้องแก้ไขคุณสามารถใช้โปรแกรมดูเอกสารของ Google ผ่านทาง <iframe>การแสดงพื้นที่ห่างไกล/.doc.docx

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

โซลูชันดัดแปลงจาก " วิธีแสดงเอกสารคำโดยใช้ fancybox "

ตัวอย่าง:

JSFiddle

อย่างไรก็ตามหากคุณต้องการได้รับการสนับสนุนเป็นหลักส่วนใหญ่หากไม่ใช่เบราว์เซอร์ทั้งหมดฉันขอแนะนำให้บันทึกไฟล์.doc/ .docxเป็นไฟล์ PDF ซึ่งสามารถแสดงผลได้อย่างอิสระโดยใช้PDF.jsโดย Mozilla

แก้ไข:

ขอบคุณfatbotdesigns เป็นอย่างมากสำหรับการโพสต์โปรแกรมดู Microsoft Office 365 ในความคิดเห็น

<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>

ข้อควรระวังที่สำคัญอีกข้อหนึ่งที่ควรจดจำตามที่เห็นโดยlightswitch05คือคือการอัปโหลดเอกสารของคุณไปยังเซิร์ฟเวอร์บุคคลที่สาม หากไม่สามารถยอมรับได้แสดงว่าวิธีการแสดงผลนี้ไม่ใช่วิธีการที่เหมาะสม

ตัวอย่างสด:

Google Docs Viewer

ตัวแสดง Microsoft Office

คำตอบของ Brandon และ fatbotdesigns นั้นถูกต้อง แต่เมื่อนำตัวอย่าง Google เอกสารมาใช้เราพบไฟล์. docx หลายไฟล์ที่ Google ไม่สามารถจัดการได้ เปลี่ยนเป็นภาพตัวอย่าง MS Office Online และใช้งานได้อย่างมีเสน่ห์

คำแนะนำของฉันคือใช้ URL ตัวอย่างของ MS Office บน Google

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

ดูเหมือนว่าจะมีไลบรารี js บางส่วนที่สามารถจัดการ. docx (ไม่ใช่. doc) เป็น html conversion ฝั่งไคลเอ็นต์ (ตามลำดับโดยเฉพาะ):

• https://github.com/lalalic/docx2html - docx to html องค์ประกอบส่วนใหญ่ได้รับการสนับสนุน

• https://github.com/mwilliamson/mammoth.js - รองรับส่วนหัว, รายการ, ตาราง, endnotes, เชิงอรรถ, รูปภาพและกล่องข้อความ

• https://www.npmjs.com/package/docx2html - แปลงเอกสาร DOCX เป็น HTML ในเบราว์เซอร์หรือ nodejs

• https://github.com/artburkart/docx2html - เห็นได้ชัดว่าทำงานได้ในเบราว์เซอร์

^{หมายเหตุ: หากคุณกำลังมองหาวิธีที่ดีที่สุดในการแปลงไฟล์ doc / docx บนฝั่งไคลเอ็นต์แล้วอาจจะเป็นคำตอบคือไม่ได้ทำมัน ถ้าคุณต้องการทำมันจริงๆให้ทำฝั่งเซิร์ฟเวอร์เช่นกับlibreoffice ในโหมด headless , apache-poi (java) , pandocหรือไลบรารีอื่นใดที่ทำงานได้ดีที่สุดสำหรับคุณ}

ฉันคิดว่าฉันมีความคิด สิ่งนี้กำลังทำน็อตของฉันด้วยและฉันยังคงมีปัญหาในการแสดงใน Chrome

บันทึกเอกสาร (name.docx) เป็น word เป็นเว็บเพจไฟล์เดียว (name.mht) ในการใช้ html ของคุณ

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

เปลี่ยนความสูงและความกว้างตามที่เห็นสมควร

ViewerJSมีประโยชน์ในการดู / ฝังรูปแบบ openoffice เช่น odt, odp, ods และ pdf

สำหรับเอกสาร openoffice / pdf แบบฝัง

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

/ViewerJS/ คือเส้นทางของ ViewerJS

#../demo/ohm2013 เส้นทางของไฟล์ของคุณต้องการฝัง

เอกสารพื้นเมือง (ที่ฉันมีความสนใจ) ทำให้ผู้ดู (และผู้แก้ไข) โดยเฉพาะสำหรับเอกสาร Word (ทั้งรูปแบบไบนารี. doc แบบดั้งเดิม. doc และรูปแบบ docx ที่ทันสมัย) มันทำได้โดยไม่สูญเสียการแปลงเป็น HTML นี่คือวิธีเริ่มต้นhttps://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

หากคุณต้องการก่อนประมวลผลไฟล์ DOCX ของคุณแทนที่จะรอจนกว่ารันไทม์คุณสามารถแปลงให้เป็น HTML เป็นครั้งแรกโดยใช้ API การแปลงไฟล์เช่นZamzar คุณสามารถใช้ API เพื่อแปลงจาก DOCX เป็น HMTL โดยทางโปรแกรมบันทึกผลลัพธ์ไปยังเซิร์ฟเวอร์ของคุณจากนั้นให้บริการ HTML นั้นจนถึงผู้ใช้ปลายทางของคุณ

การแปลงเป็นเรื่องง่าย:

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

การดำเนินการนี้จะลบการพึ่งพารันไทม์บนบริการของ Google และ Microsoft (ตัวอย่างเช่นหากไม่ทำงานหรือคุณถูก จำกัด อัตรา)

นอกจากนี้ยังมีประโยชน์ที่คุณสามารถขยายไปยังประเภทไฟล์อื่น ๆหากคุณต้องการ (PPTX, XLS, DOC ฯลฯ )