【问题标题】:How do I render a Word document (.doc, .docx) in the browser using JavaScript?如何使用 JavaScript 在浏览器中呈现 Word 文档(.doc、.docx)?
【发布时间】:2015-03-13 12:16:54
【问题描述】:

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

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

【问题讨论】:

标签: javascript browser ms-word


【解决方案1】:

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

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

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

解决方案改编自“How to display a word document using fancybox”。

例子:

JSFiddle

但是,如果您希望在大多数(如果不是所有)浏览器中获得本机支持,我建议您将 .doc/.docx 重新保存为 PDF 文件 这些也可以使用 PDF.js 独立呈现Mozilla。

编辑:

非常感谢 cubeguerrero 在 cmets 中发布 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 Docs Viewer

Microsoft Office Viewer

【讨论】:

  • @Pankaj 即使您托管本地服务器,Google 也无法访问 localhost。它需要一个可公开访问的 URL。您可以使用Finch 之类的基本转发服务。
  • 您也可以使用 Office Live Apps 查看器://view.officeapps.live.com/op/embed.aspx?src=your_url_here 将此 url 放入 iframe
  • 只想指出,这两种方法都可以将文件上传到谷歌和微软的服务器。如果您正在处理应该具有有限访问权限的敏感信息,请不要这样做。使用 PDF.js 的替代解决方案生成文件的 PDF 版本以在浏览器中查看并提供下载各种 excel/doc 版本的链接。
  • @lightswitch05 嘿,只是偶然发现了这一点,我在阅读了您的评论后查看了 pdf.js,但找不到任何有关将 doc / xls 文件转换为 pdf 以在浏览器中显示它们的文档,这将如何运作?
  • 我们在 2021 年,但仍然没有解决方案,可悲的是! ?
【解决方案2】:

Brandon 和 fatbotdesigns 的回答都是正确的,但是在实施 Google 文档预览后,我们发现了多个 Google 无法处理的 .docx 文件。切换到 MS Office Online 预览版,效果非常棒。

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

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

【讨论】:

  • 使用这个有什么限制吗? support.microsoft.com/en-us/help/2769380/…
  • 提供反叙述 - 我们选择了 google 版本,因为 microsoft 渲染器在 chrome 和 ff 中都需要更长的时间来加载
  • 有没有类似的PDF预览服务?
  • 发生错误 很抱歉,由于某种原因,我们无法为您打开此文件。使用时出现此错误
【解决方案3】:

有一些 js 库可以处理 .docx(不是 .doc)到 html 的客户端转换(不分先后):

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

【讨论】:

  • 我会注意到我的库完全没有维护。它能够将 docx 文件转换为可以在浏览器中呈现的内容。我不知道这是不是真的。
【解决方案4】:

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

【讨论】:

  • 我可以使用来自 aws s3 的链接 url
  • 不,您只提供本地链接
  • 不幸的是,在我的上下文中,微软格式更普遍。
  • @guettli 您可以使用 pandoc 进行转换。那里有一个 pandoc wasm 版本
  • docx 怎么样?
【解决方案5】:

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

由于文件是机密文件,因此不应在第三方资源上处理它们。
此解决方案是开源

  1. 在服务器端:使用 Gotenberg 将 word 和 excel 文件转换为 PDF。
    注意:Gotenberg 的工作原理非常棒,它基于 LibreOffice 引擎。
  2. 在前端:使用 javascript 渲染 PDF 文件非常容易。您可以使用以下库:pdf.jsreact-pdf 等)

【讨论】:

  • 这是独立渲染器的最佳解决方案!
【解决方案6】:

我想我有个主意。 这也让我很生气,但我仍然无法让它在 Chrome 中显示。

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

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

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

【讨论】:

  • @guidomocha 不要只是评论,提供理由说明为什么这是一种不好的方法。
  • 这种方式会显示没有背景图形、页眉、页脚等元素的文档文本。对于具有不同元素定位的长文件保存为网页会破坏设计。
【解决方案7】:

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

【讨论】:

  • 它没有任何定价信息。 “Word 文件编辑器/查看器”是免费的吗?
  • 它的商业软件,但我们为初创公司/小型企业提供免费计划,对于其他人,免费计划受使用限制。我们将很快发布详细信息。
  • 这可以在单页无服务器上运行,例如在 aws s3 上吗?
  • 服务器端我们将其打包为 Docker 容器,您需要在某个地方(例如 ECS)运行。 (原则上我们可以在 Lambda 上运行其中的一些,但你仍然需要一个持久的文档存储,也许是 S3)
  • @JasonPlutext 这看起来很有趣。但我会直言不讳:我愿意为优质的套餐或服务支付少量合理的费用 - 但“提交您的信息,我们会告诉您费用”是不可行.
【解决方案8】:

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

【讨论】:

  • 它需要付费许可证才能完全使用它
【解决方案9】:

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

【讨论】:

  • 它需要付费许可证才能完全使用它
【解决方案10】:

如果您想预处理 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"

这将消除对 Google 和 Microsoft 服务的任何运行时依赖项(例如,如果它们出现故障,或者您受到它们的速率限制)。

它还有一个好处是你可以根据需要扩展到other filetypes(PPTX、XLS、DOC 等)

【讨论】:

    【解决方案11】:

    使用 Libre Office API 这是一个例子

    libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path

    【讨论】:

    • 再次阅读问题。这看起来不像 JavaScript。
    猜你喜欢
    • 2019-09-05
    • 1970-01-01
    • 2010-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-16
    相关资源
    最近更新 更多