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

有人能帮忙吗?在浏览器中显示Word文档时,我总是会弹出“打开/保存”对话框。我想使用JavaScript实现这个功能。


目前没有浏览器有呈现Word文档所需的代码,而且据我所知,目前也没有用于呈现Word文档的客户端库。

然而,如果你只需要显示Word文档,但不需要编辑它,你可以通过<iframe>使用谷歌文档查看器来显示远程托管的.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独立呈现。

编辑:

非常感谢cubeguerrero在评论中发布了微软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所指出的,这将把文档上传到第三方服务器。如果这是不可接受的,那么这种显示方法就不是正确的做法。

生活例子:

谷歌文档查看器

Microsoft Office Viewer


我想我有主意了。 这一直在做我的坚果在太,我仍然有麻烦让它显示在Chrome。

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

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

根据你的需要调整高度和宽度。


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

我的建议是使用MS Office预览URL,而不是谷歌。

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

有一些JS库可以在客户端处理。docx(不是。doc)到HTML的转换(没有特定的顺序):

https://github.com/lalalic/docx2html (npm) - docx到html,支持大多数元素,在浏览器或nodejs中工作 https://github.com/mwilliamson/mammoth.js -支持标题,列表,表格,尾注,脚注,图像和文本框 https://github.com/artburkart/docx2html -显然,在浏览器中工作

注意:如果您正在寻找在客户端转换doc/docx文件的最佳方法,那么答案可能是不要这样做。如果你真的需要这样做,那么就在服务器端进行,即在headless模式下使用libreoffice, apache-poi (java), pandoc等。


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


如果您想对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"

这将消除对谷歌和Microsoft服务的任何运行时依赖(例如,如果它们宕机了,或者您的速率受到它们的限制)。

它也有好处,你可以扩展到其他文件类型,如果你想(PPTX, XLS, DOC等)


Native Documents(我对它很感兴趣)专门为Word文档(包括传统的二进制.doc和现代docx格式)制作了一个查看器(和编辑器)。这样做不会造成对HTML的有损转换。以下是如何开始https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md


PDFTron WebViewer支持在任何浏览器中直接呈现Word(和其他Office格式),不需要任何服务器端依赖。 要测试,请尝试https://www.pdftron.com/webviewer/demo


你也可以使用一些现有的API,比如GroupDocs。查看器,可以将您的文档转换为图像或html,然后您将能够在自己的应用程序中显示它。


使用Libre Office API 这里有一个例子

Libreoffice——headless——convert-to HTML docx-file-path——outdir HTML -dir-path


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

由于这些文件是机密的,不应该在第三方资源上处理。 这个解决方案是开源的:

在服务器端:使用Gotenberg将word和excel文件转换为PDF。注:Gotenberg的工作就像一个魅力,它是基于LibreOffice引擎。 前端:用javascript渲染PDF文件非常容易。(你可以使用pdf.js, react-pdf等库)