如何使用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转换客户端(没有特定的顺序):
-
https://github.com/lalalic/docx2html – docx到html,大多数元素都支持
-
mwilliamson/mammoth.html – 支持标题,列表,表格,尾注,脚注,图像和文本框
-
https://www.npmjs.com/package/docx2html – 在浏览器中将HTML文档转换为DOCX
-
https://github.com/artburkart/docx2html – 显然,在浏览器中工作
注意:如果你正在寻找在客户端转换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等)