如何使用JavaScript在浏览器中呈现Word文档(.doc,.docx)？

Question

我已成功完成代码以在浏览器中显示PDF文件,而不是"打开/保存"对话框.现在,我一直试图在浏览器中显示Word文档.我想在Firefox,IE7 +,Chrome等中显示Word文档.

任何人都可以帮忙吗？在浏览器中显示Word文档时,我总是收到"打开/保存"对话框.我想使用JavaScript实现此功能.

Answer 1

目前没有浏览器具有呈现Word文档所需的代码,据我所知,目前还没有用于呈现它们的客户端库.

但是,如果您只需要显示Word文档,但不需要对其进行编辑,则可以通过<iframe>a 使用Google文档查看器来显示远程托管.doc/.docx.

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

解决方案改编自" 如何使用fancybox显示word文档 ".

例:

的jsfiddle

但是,如果您更喜欢本机支持,在大多数情况下,如果不是所有浏览器,我建议将.doc/ 重新保存.docx为PDF文件.这些也可以使用Mozilla的PDF.js独立呈现.

编辑:

非常感谢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文档查看器

Microsoft Office Viewer

Answer 2

Brandon和fatbotdesigns的答案都是正确的,但实施了Google文档预览后,我们发现了Google无法处理的多个.docx文件.切换到MS Office Online预览,工作就像一个魅力.

我的建议是在Google上使用MS Office预览网址.

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

Answer 3

如果您的数据属于机密，这是一个很好的解决方案

由于这些文件是保密的，因此不应在第三方资源上进行处理。
该解决方案是开源的：

1. 在服务器端：使用Gotenberg将word和excel文件转换为PDF。
   注意：Gotenberg 的工作方式就像一个魅力，它基于 LibreOffice 引擎。
2. 在前端：使用 javascript 渲染 PDF 文件非常容易。（您可以使用以下库：pdf.js、react-pdf等）

Answer 4

似乎有一些js库可以处理.docx(非.doc)到html转换客户端(没有特定的顺序):

• https://github.com/lalalic/docx2html - docx到html,支持大多数元素

• https://github.com/mwilliamson/mammoth.js - 支持标题,列表,表格,尾注,脚注,图像和文本框

• https://www.npmjs.com/package/docx2html - 在浏览器或nodejs中将DOCX文档转换为HTML

• https://github.com/artburkart/docx2html - 显然,可以在浏览器中使用

^{注意:如果您正在寻找在客户端转换doc/docx文件的最佳方法,那么可能答案是不要这样做.如果你真的需要这样做,那就去服务器端,即无头模式下的libreoffice,apache-poi(java),pandoc或者其他最适合你的库.}

Answer 5

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是您要嵌入的文件的路径