如何使用 JavaScript 在浏览器中呈现 Word 文档（.doc、.docx）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27957766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I render a Word document (.doc, .docx) in the browser using JavaScript?
提问by Pankaj
I have successfully done code to display a PDF file in the browser instead of the "Open/Save" dialog. Now, I'm stuck trying to display a Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome etc.
我已经成功完成了在浏览器中显示 PDF 文件而不是“打开/保存”对话框的代码。现在，我一直在尝试在浏览器中显示 Word 文档。我想在 Firefox、IE7+、Chrome 等中显示 Word 文档。
Can any one help? I am always getting the "Open/Save" dialog while displaying the Word doc in browser. I want to implement this functionality using JavaScript.
任何人都可以帮忙吗？在浏览器中显示 Word 文档时，我总是收到“打开/保存”对话框。我想使用 JavaScript 实现这个功能。
回答by Brandon Anzaldi
No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either.
目前没有浏览器具有渲染 Word 文档所需的代码，据我所知，目前也没有用于渲染它们的客户端库。
However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an <iframe>to display a remotely hosted .doc/.docx.
但是，如果您只需要显示 Word 文档，而不需要对其进行编辑，则可以通过 使用 Google 文档查看器<iframe>来显示远程托管的.doc/ .docx。
<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>
Solution adapted from "How to display a word document using fancybox".
解决方案改编自“如何使用fancybox显示word文档”。
Example:
例子：
However, if you'd rather have native support, in most, if not all browsers, I'd recommend resaving the .doc/.docxas a PDF file Those can also be independently rendered using PDF.jsby Mozilla.
但是，如果您希望获得本机支持，在大多数（如果不是所有）浏览器中，我建议将.doc/重新保存.docx为 PDF 文件这些也可以由 Mozilla使用PDF.js独立呈现。
Edit:
编辑：
Huge thanks to fatbotdesignsfor posting the Microsoft Office 365 viewer in the comments.
非常感谢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>
One more important caveat to keep in mind, as pointed out by lightswitch05, is that this will upload your document to a third-party server. If this is unacceptable, then this method of display isn't the proper course of action.
正如lightswitch05所指出的，要记住的另一个重要警告是，这会将您的文档上传到第三方服务器。如果这是不可接受的，那么这种显示方法就不是正确的做法。
Live Examples:
现场示例：
回答by kernelmann
The answers by Brandon and fatbotdesigns are both correct, but having implemented the Google docs preview, we found multiple .docx files that couldn't be handled by Google. Switched to the MS Office Online preview and works likes a charm.
Brandon 和 fatbotdesigns 的答案都是正确的，但是在实施了 Google 文档预览后，我们发现了多个 Google 无法处理的 .docx 文件。切换到 MS Office Online 预览版，工作起来很有魅力。
My recommendation would be to use the MS Office Preview URL over Google's.
我的建议是在 Google 上使用 MS Office Preview URL。
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
回答by ccpizza
There seem to be some js libraries that can handle .docx (not .doc) to html conversion client-side (in no particular order):
似乎有一些 js 库可以处理 .docx（不是 .doc）到 html 转换客户端（没有特定的顺序）：
https://github.com/lalalic/docx2html— docx to html, most elements are supported
https://github.com/mwilliamson/mammoth.js— supports headings, lists, tables, endnotes, footnotes, images and text boxes
https://www.npmjs.com/package/docx2html— Converts DOCX documents to HTML in the browser or nodejs
https://github.com/artburkart/docx2html— apparently, works in the browser
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— 显然，在浏览器中工作
Note: If you are looking for the best way to convert a doc/docx file on the client side, then probably the answer is don't do it. If you really need to do it then do it server-side, i.e. with libreoffice in headless mode, apache-poi (java), pandocor whatever other library works best for you.
注意：如果您正在寻找在客户端转换 doc/docx 文件的最佳方法，那么答案可能是不要这样做。如果您真的需要这样做，那么在服务器端进行，即在无头模式下使用libreoffice、apache-poi (java)、pandoc或任何其他最适合您的库。
回答by NaveenDA
ViewerJSis helpful to view/embed openoffice format like odt,odp,ods and also pdf.
ViewerJS有助于查看/嵌入 openoffice 格式，如 odt、odp、ods 和 pdf。
For embed openoffice/pdf document
用于嵌入 openoffice/pdf 文档
<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>
/ViewerJS/is the path of ViewerJS
/ViewerJS/是ViewerJS的路径
#../demo/ohm2013is the path of your file want to embed
#../demo/ohm2013是您要嵌入的文件的路径
回答by JasonPlutext
Native Documents (in which I have an interest) makes a viewer (and editor) specifically for Word documents (both legacy binary .doc and modern docx formats). It does so without lossy conversion to HTML. Here's how to get started https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md
Native Documents（我对其中感兴趣）专门为 Word 文档（遗留二进制 .doc 和现代 docx 格式）制作了一个查看器（和编辑器）。它不会有损地转换为 HTML。以下是如何开始https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md
回答by Cai Esson
I think I have an idea. This has been doing my nut in too and I'm still having trouble getting it to display in Chrome.
我想我有一个想法。这也一直困扰着我，但我仍然无法让它在 Chrome 中显示。
Save document(name.docx) in word as single file webpage (name.mht) In your html use
将 word 中的文档（名称.docx）保存为单个文件网页（名称.mht）在您的 html 中使用
<iframe src= "name.mht" width="100%" height="800"> </iframe>
Alter the heights and widths as you see fit.
根据需要更改高度和宽度。
回答by Chris Whyley
If you wanted to pre-process your DOCX files, rather than waiting until runtime you could convert them into HTML first by using a file conversion API such as Zamzar. You could use the API to programatically convert from DOCX to HMTL, save the output to your server and then serve that HTML up to your end users.
如果您想对 DOCX 文件进行预处理，而不是等到运行时，您可以先使用文件转换 API（例如Zamzar ）将它们转换为 HTML 。您可以使用 API 以编程方式从 DOCX 转换为 HMTL，将输出保存到您的服务器，然后将该 HTML 提供给您的最终用户。
Conversion is pretty easy:
转换非常简单：
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "[email protected]" \
-F "target_format=html5"
This would remove any runtime dependencies on Google & Microsoft's services (for example if they were down, or you were rate limited by them).
这将消除对 Google 和 Microsoft 服务的任何运行时依赖性（例如，如果它们出现故障，或者您受到它们的速率限制）。
It also has the benefit that you could extend to other filetypesif you wanted (PPTX, XLS, DOC etc)
它还具有您可以根据需要扩展到其他文件类型的好处（PPTX、XLS、DOC 等）
