在網頁直接預覽 Word .docx 文件

2026-09-18 10:14 PM

現代瀏覽器都內建支援 PDF，遇到表單或流程有 PDF 附檔時，在網頁點一下便可直接用瀏覽器檢視。相形之下，Word 文件必須下載回本機開啟，操作體驗明顯差了一大截...

今天花了點時間研究，找到不錯的解法，雖不完美，但要快速預覽內容已綽綽有餘。

Word 轉 HTML 的程式庫不少，開源或商業軟體都有，但就網頁應用來說，純 JavaScript 程式庫應屬最輕巧簡潔的解法。查了一下，意外選擇還不少，我前後試了幾個：

Mammoth.js
功能陽春，支援格式有限，看文字內容沒問題，但排版樣式盡失，不夠理想
docx2html
線上展示出錯跑不起來，跳過
JitViewer
支援 PDF、DOCX、XLSX、PPTX、OFD、TXT、Markdown、影片、CSV、CAD，支援 Vue/React 整合，檢視器還提供放大縮小旋轉等功能，Word 排版還原度很不錯。缺點是需明顯加註 JitViewer 提供文档预览支持 版權資訊
docx-preview
只支援 .docx，文件排版及樣式的還原度頗高，小缺點是文件變成不分頁連續顯示，分頁資訊消失：

與原始文件仍有一些出入，但做到這個程度已符合預覽內容的需求~

這類還原特定文件格式的程式庫一定存在某些格式、內容呈現不正確的問題，Issue 區滿是各種特殊情境的問題回報。就預覽應用，永遠存在不行就下載回去看這條後路，追求完美無瑕的解決方案不符成本效益。經過評估，我決定選用 docx-preview。

在網頁加入 docx-preview 很簡單，引用 CDN 上的 jszip.min.js 及 docx-preview.min.js，取得檔案後呼叫 docx.renderAsync() 產生預覽視窗，搞定收工。參考

<!DOCTYPE html>
<html>

<body>
    <div style="margin-bottom: 15px;">
        <input id="fileInput" type="file" accept=".docx">
        <p style="font-size: 0.9em; color: #666;">選擇 Word 文件(.docx)進行預覽</p>
    </div>
    <div class="row">
        <div style="margin-bottom: 20px;">
            <h3>預覽結果</h3>
            <div id="container"></div>
        </div>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/docx-preview.js"></script>
    <script>
        // 初始化事件監聽
        document.getElementById("fileInput").addEventListener("change", handleFile, false);

        function handleFile(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const docData = e.target.result;
                    docx.renderAsync(docData, document.getElementById("container"))
                        .then(x => {
                            console.log("docx: finished", x)
                        });
                };
                reader.readAsArrayBuffer(file);
            }
        }
    </script>
</body>

</html>

線上展示

就醬，.docx 也能像 .pdf 一樣直接在瀏覽器裡預覽檢視囉~ 使用者體驗再加分。

在網頁直接預覽 Word .docx 文件

Comments

Post a comment