如何使用 JavaScript 在浏览器中呈现 Word 文档（.doc、.docx）？

Question

我已经成功地完成了在浏览器而不是 "Open/Save" 对话框中显示 PDF 文件的代码。现在，我无法尝试在浏览器中显示 Word 文档。我想在 Firefox、IE7+、Chrome 等

中显示一个 Word 文档

有人可以帮忙吗？在浏览器中显示 Word 文档时，我总是收到 "Open/Save" 对话框。我想使用 JavaScript.

实现此功能

Answer 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 文件那些也可以独立使用 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 所指出的，还有一个需要牢记的重要警告是，这会将您的文档上传到第三方服务器。如果这是不可接受的，那么这种显示方法不是正确的做法。

实例：

Google Docs Viewer

Microsoft Office Viewer

Answer 2

我想我有一个想法。这也让我很头疼，我仍然无法在 Chrome.

中显示它

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

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

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

Answer 3

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

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

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

Answer 4

有一些 js 库可以处理 .docx（不是 .doc）到 html 的转换 client-side（排名不分先后）：

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 — 显然，在浏览器中有效

^{注意：如果您正在寻找在客户端转换 doc/docx 文件的最佳方法，那么答案可能是不要这样做.如果你真的需要这样做，那就去做 server-side，即 libreoffice in headless mode, apache-poi (java), pandoc 等等}

Answer 5

ViewerJS 有助于 view/embed openoffice 格式，如 odt、odp、ods 和 pdf。

用于嵌入 openoffice/pdf 文档

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/是ViewerJS的路径

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

使用 Libre Office API 这是一个例子

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

Answer 11

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

由于文件是机密文件，因此不应在第三方资源上进行处理。
此解决方案是开源:

在服务器端：使用 Gotenberg 将 word 和 excel 文件转换为 PDF。
注意：Gotenberg 非常棒，它基于 LibreOffice 引擎.
在前端：使用 javascript 渲染 PDF 文件非常容易。您可以使用像这样的库：pdf.js, react-pdf，等等）

Answer 12

根据一些研究，我得到它用于 IMAGES、PDF、文档和 Excel Iframe 中的文件预览

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
    $('#btnShow').click(function(){
        $("#dialog").dialog({
        height: 600,
        width: 1000,
        show: 'fold',
        modal: true
        });

        var toolbar = "#toolbar=0";

        //pdf
        //$("#frame").attr("src", "pdf_file_url.pdf"+toolbar);
        //image
        //$("#frame").attr("src", "image_file_url.jpeg"+toolbar);

        //document
        $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=doc_file_url.docx");

        //excel

      // $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=excel_file_url.xlsx");

    }); 
    });
</script>

<a href="javascript:void(0)" id="btnShow">Click to open</a>
<div id="dialog" style="display: none;">
    <div>
    <iframe id="frame" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" style="height:100%;width:100%;border: 0px;"></iframe>
    </div>
</div>

如何使用 JavaScript 在浏览器中呈现 Word 文档（.doc、.docx）？

How do I render a Word document (.doc, .docx) in the browser using JavaScript?

javascript

browser

ms-word

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