logo标签列表

如何使用 JavaScript 在浏览器中渲染 Word 文档（.doc，.docx）？

javascriptbrowserms-word
242

我已经成功地编写了代码，可以在浏览器中显示PDF文件，而不是“打开/保存”对话框。现在，我正试图在浏览器中显示Word文档，但卡住了。我想在Firefox、IE7+、Chrome等浏览器中显示Word文档。

有人能帮忙吗？每次在浏览器中显示Word文档时，我总是得到“打开/保存”对话框。我想使用JavaScript实现这个功能。

1
https://dev59.com/i2DVa4cB1Zd3GeqPgsqL - Sadikhasan
2
你可以在React中使用syncfusion-document-editor来展示和编辑docx文件。 - Yusuf Mohammad
14个回答
353
目前没有任何浏览器可以渲染Word文档所需的代码，据我所知，也没有现有的客户端库用于渲染它们。
但是，如果您只需要显示Word文档而不需要编辑它，则可以使用Google文档的查看器通过<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在评论中发布了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指出的那样，还有一个重要的限制条件，即这将上传您的文档到第三方服务器。如果这是不可接受的，则此显示方法不是适当的操作。

实时示例：

谷歌文档查看器

微软办公室查看器

4
即使你在本地主机上运行服务器，谷歌也无法访问“localhost”。它需要一个公开可访问的URL。你可以使用像Finch这样的基本转发服务。 - Brandon Anzaldi
15
您可以使用Office Live Apps Viewer：//view.officeapps.live.com/op/embed.aspx?src=your_url_here将此URL放入iframe中。 - cubeguerrero
56
只是想指出，这两种方法都会将文件上传到Google和Microsoft的服务器。如果您处理的是应该有限制访问的敏感信息，请不要这样做。使用PDF.js的替代解决方案生成文件的PDF版本以在浏览器中查看，并提供下载各种Excel/Doc版本的链接。 - lightswitch05
4
嗨，@lightswitch05，我偶然发现了这个问题。看完你的评论后，我查看了一下pdf.js，但没有找到任何有关将doc / xls文件转换为PDF以在浏览器中显示的文档，它是如何工作的呢？ - stackg91
6
我们已经到了2021年，可悲的是，这个问题仍然没有解决方案！ - Vinicius Dutra
显示剩余29条评论
48

Brandon和fatbotdesigns的答案都是正确的，但在实施Google文档预览时，我们发现有多个无法被Google处理的.docx文件。转而使用MS Office Online预览，效果如此出色。

我的建议是使用MS Office预览URL而不是Google的。

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
1
使用此功能是否有任何限制？https://support.microsoft.com/zh-cn/help/2769380/file-not-found-error-message-when-you-try-to-open-an-office-file-from - Vishnu
为了提供一个反面论述，我们选择了谷歌版本，因为微软的渲染器在Chrome和Firefox中加载时间较长。 - snerd
1
是否有类似的服务可以预览PDF文件？ - Igor Nikiforov
2
发生了错误 很抱歉，由于某些原因我们无法为您打开此内容。我在使用时遇到了这个错误。 - Varun Kumar Medam
1
@IgorNikiforov 对于 PDF 文件，你可以使用 Mozilla 的 pdf.js — 它很稳定，可靠并经过时间考验。 - ccpizza
33

有几个可以在客户端处理.docx（而不是.doc）转换为HTML的JS库（无特定顺序）：

注意：如果你正在寻找在客户端上转换doc/docx文件的最佳方法，那么答案可能是“不要这样做”。如果你真的需要这样做，那么请在服务器端进行，例如使用LibreOffice无界面模式、Apache POI（Java）、Pandoc等工具。
3
我要注意到我的库完全没有维护。它能够将docx文件转换为可以在浏览器中呈现的内容。我不知道这是否仍然正确。 - artburkart
为什么你会说“答案是不要这样做”？ - Luke
1
@Luke，因为这种任务最好在服务器端完成；在客户端完成会将太多的责任委托给客户端，并对客户端的能力、性能等做出太多假设；理想情况下，您希望在服务器上渲染所有内容，并以最有效的方式传递给客户端，最好是以易于缓存的格式。 - ccpizza
23

如果您的数据是机密的，这是一个非常好的解决方案

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

  1. 在服务器端：使用Gotenberg将Word和Excel文件转换为PDF。
    注意：Gotenberg工作得很出色，它基于LibreOffice引擎。
  2. 在前端：使用JavaScript轻松呈现PDF文件。(您可以使用像pdf.js、react-pdf等库)
2
这是一个独立渲染器的最佳解决方案！ - Thanasis
5
ViewerJS 对于查看/嵌入类似odt、odp、ods和pdf的openoffice格式非常有帮助。
对于嵌入openoffice/pdf文档：
<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/ 是 ViewerJS 的路径

#../demo/ohm2013 是要嵌入的文件的路径

我能使用来自AWS S3的链接URL吗？ - Vishnu
不好意思，您只提供了本地链接。 - Naveen DA
不幸的是，在我的环境中，微软格式更为普遍。 - guettli
1
@guettli 你可以使用 pandoc 进行转换。目前有一个 pandoc wasm 版本可供使用。 - Erik Aronesty
docx怎么样？ - Ray Coder
3

我觉得我有一个想法。 这个问题也一直困扰着我，我仍然无法让它在Chrome中显示。

将文档（name.docx）在Word中保存为单个文件网页（name.mht） 在你的html中使用以下代码：

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

根据需要修改高度和宽度。

8
不只是评论，还要提供为什么这种方法不好的理由。 - J. Louw
这种方法将显示文档文本，而不包括背景图形、页眉、页脚和其他元素。对于具有不同元素定位的长文件，保存为网页将破坏设计。 - sh.e.salh
1
如果您想要预处理DOCX文件，而不是等到运行时再处理，可以先使用文件转换API（如Zamzar）将其转换为HTML。您可以使用该API将DOCX程序化地转换为HTML，并将输出保存到服务器，然后向最终用户提供该HTML。转换非常简单：
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

这将消除对Google和Microsoft服务的任何运行时依赖（例如，如果它们已停机或您受到了速率限制）。

它还具有一个好处，即您可以扩展到其他文件类型（如PPTX，XLS，DOC等）。

1
2
需要付费许可证才能完全使用它。 - mending3
1

Native Documents（我有兴趣的公司）制作了一个专门用于Word文档（包括传统的二进制.doc和现代的docx格式）的查看器（和编辑器）。它可以在不丢失信息的情况下直接处理这些文档，而无需将其转换为HTML格式。以下是开始使用的方法https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

2
它没有任何关于定价的信息。'Word文件编辑器/查看器'是免费的吗？ - FiringBlanks
这是商业软件，但我们为初创企业/小型企业提供免费计划，对于其他人，则有一个受使用限制的免费计划。我们很快会公布详细信息。 - JasonPlutext
这个能在单页无服务器环境下运行吗，例如在AWS S3上？ - Graham Chiu
服务器端，我们将其打包为Docker容器，您需要在某个地方运行它们（例如ECS）。 （原则上，我们可以在Lambda上运行其中一些内容，但您仍然需要一个持久的文档存储，可能是S3） - JasonPlutext
4
这看起来很有趣。但是我直言不讳：我愿意为一个好的套餐或服务支付一笔小费用，但“提交您的信息，我们会告诉您费用”是不可接受的。 - manassehkatz-Moving 2 Codidact
1

您还可以使用一些现有的API，例如GroupDocs.Viewer，它可以将您的文档转换为图像或HTML，然后您就可以在自己的应用程序中显示它。

需要付费许可证才能完全使用它。 - mending3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接