如何使用 JavaScript 在瀏覽器中呈現 Word 文檔（.doc、.docx）？

Question

我已成功完成代碼以在瀏覽器中顯示 PDF 文件而不是“打開/保存”對話框。 現在，我無法嘗試在瀏覽器中顯示 Word 文檔。 我想在Firefox、IE7+、Chrome等瀏覽器中顯示一個Word文檔。

任何人都可以幫忙嗎？ 在瀏覽器中顯示 Word 文檔時，我總是會收到“打開/保存”對話框。 我想使用 JavaScript 實現此功能。

Answer 1

目前沒有瀏覽器具有呈現 Word 文檔所需的代碼，據我所知，目前也沒有用於呈現它們的客戶端庫。

但是，如果您只需要顯示 Word 文檔而不需要對其進行編輯，則可以通過<iframe>使用 Google Documents 的查看器來顯示遠程托管的.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所指出的，要記住的一個更重要的警告是，這會將您的文檔上傳到第三方服務器。 如果這是不可接受的，那么這種顯示方法就不是正確的做法。

活生生的例子：

谷歌文檔查看器

微軟辦公室查看器

Answer 2

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 3

有一些 js 庫可以在客戶端處理 .docx（不是 .doc）到 html 轉換（無特定順序）：

• 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 文件的最佳方法，那么答案可能是不要這樣做。 如果你真的需要這樣做，那么在服務器端進行，即在無頭模式下使用 libreoffice 、 apache-poi (java) 、 pandoc等。}

Answer 4

如果您的數據是機密的，這是一個很好的解決方案

由於這些文件是機密文件，因此不應在第三方資源上處理它們。
此解決方案是開源的：

1. 在服務器端：使用Gotenberg將 word 和 excel 文件轉換為 PDF。
   注意：Gotenberg 就像一個魅力，它基於 LibreOffice 引擎。
2. 在前端：使用 javascript 渲染 PDF 文件非常容易。 （您可以使用以下庫： pdf.js 、 react-pdf等）

Answer 5

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

Answer 6

我想我有個主意。 這也讓我很瘋狂，但我仍然無法讓它在 Chrome 中顯示。

將 word 中的文檔（name.docx）保存為單個文件網頁（name.mht）在您的 html 中使用

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

更改您認為合適的高度和寬度。

Answer 7

如果您想預處理 DOCX 文件，而不是等到運行時，您可以先使用Zamzar等文件轉換 API 將它們轉換為 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 服務的任何運行時依賴項（例如，如果它們出現故障，或者您受到它們的速率限制）。

它還有一個好處是您可以根據需要擴展到其他文件類型（PPTX、XLS、DOC 等）

Answer 8

Native Documents（我對此感興趣）專門為 Word 文檔（傳統二進制 .doc 和現代 docx 格式）制作了查看器（和編輯器）。 它不會有損地轉換為 HTML。 以下是如何開始https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Answer 9

PDFTron WebViewer 支持直接在任何瀏覽器中呈現 Word（和其他 Office 格式），而無需任何服務器端依賴項。 要測試，請嘗試https://www.pdftron.com/webviewer/demo

Answer 10

您還可以使用一些現有的 API，例如 GroupDocs.Viewer，它可以將您的文檔轉換為圖像或 html，然后您就可以在您自己的應用程序中顯示它。

Answer 11

根據一些研究，我在 Iframe 中為IMAGES、PDF、文檔和 Excel文件預覽獲得了它

<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>

Answer 12

使用 Libre Office API 這是一個示例

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