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

我已经成功地完成了在浏览器中显示PDF文件的代码,而不是“打开/保存”对话框。 现在,我试图在浏览器中显示一个Word文档。 我想在Firefox,IE7 +,Chrome等显示一个Word文档

任何人都可以帮忙吗? 在浏览器中显示Word文档时,我总是得到“打开/保存”对话框。 我想用JavaScript实现这个function。

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

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

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

解决scheme改编自“ 如何使用fancybox显示word文档 ”。

例:

的jsfiddle

但是,如果您希望获得原生支持,那么在大多数情况下(如果不是所有的浏览器),我都build议将.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

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

我的build议是使用谷歌的MS Office预览URL。

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

我想我有一个想法。 这一直在做我的坚果,我仍然无法让它显示在Chrome中。

将文档(name.docx)保存为单个文件网页(name.mht)在您的html中使用

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

改变你认为合适的高度和宽度。

ViewerJS有助于查看/embeddedopenOffice格式,如odt,odp,ods和pdf。

用于embeddedopenoffice / pdf文档

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

/ViewerJS//ViewerJS/的path

#../demo/ohm2013是你想要embedded的文件的path

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

注意:如果你正在寻找在客户端转换doc / docx文件的最佳方法,那么可能的答案是不要这样做 如果你真的需要这样做,那么在服务器端进行,即在无头模式下使用libreoffice,apache-poi或其他任何库最适合你的方式。

如果你想预处理你的DOCX文件,而不是等到运行时,你可以通过使用文件转换API(如Zamzar)将它们转换成HTML。 您可以使用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" 

这将消除任何运行时依赖谷歌和微软的服务(例如,如果他们失败了,或者你是由他们的速度限制)。

它也有利于你可以扩展到其他文件types,如果你想(PPTX,XLS,DOC等)