精品熟人妻一区二区三区四区不卡-精品爽黄69天堂a-精品水蜜桃久久久久久久-精品丝袜国产自在线拍-精品丝袜国产自在线拍a-精品丝袜国产自在线拍免费看

只需幾行代碼，你就能在瀏覽器中完美預覽 Word 文檔，甚至連表格樣式、頁眉頁腳都原汁原味地呈現出來。

接下來，給大家分享兩個 Docx 預覽的庫：

docx-preview VS mammoth

docx-preview和mammoth是目前最流行的兩個 Word 文檔預覽庫，它們各有特色且適用于不同場景。

docx-preview：還原度爆表的選擇

安裝簡單：

npm install docx-preview

基礎用法：

import { renderAsync } from 'docx-preview';

// 獲取到docx文件的blob或ArrayBuffer后
renderAsync(docData, document.getElementById('container')).then(() => console.log('文檔渲染完成！'));

試了試后，這個庫渲染出來的效果簡直和 Office 打開的一模一樣！連段落格式、表格樣式、甚至是分頁效果，都完美呈現。

mammoth：簡潔至上的轉換器

mammoth 的思路完全不同，它把 Word 文檔轉成干凈的 HTML：

npm install mammoth

使用也很簡單：

import mammoth from 'mammoth';

mammoth.convertToHtml({ arrayBuffer: docxBuffer }).then(result => {
    document.getElementById('container').innerHTML = result.value;
    console.log('轉換成功，但有些警告：', result.messages);
});

轉換出來的 HTML 非常干凈，只保留了文檔的語義結構。

比如，Word 中的"標題 1"樣式會變成 HTML 中的<h1>標簽。

哪個更適合你？

場景一：做了個簡易 Word 預覽器

要實現在線預覽 Word 文檔，且跟 "Word" 長得一模一樣。

首選docx-preview：

import { renderAsync } from'docx-preview';

async functionpreviewDocx(fileUrl) {
    try {
        // 獲取文件
        const response = awaitfetch(fileUrl);
        const docxBlob = await response.blob();

        // 渲染到頁面上
        const container = document.getElementById('docx-container');
        awaitrenderAsync(docxBlob, container, null, {
            className: 'docx-viewer',
            inWrapper: true,
            breakPages: true,
            renderHeaders: true,
            renderFooters: true,
        });

        console.log('文檔渲染成功！');
    } catch (error) {
        console.error('渲染文檔時出錯:', error);
    }
}

效果很贊！文檔分頁顯示，目錄、頁眉頁腳、表格邊框樣式都完美呈現。

不過也有些小坑：

1. 文檔特別大時，渲染速度會變慢

2. 一些復雜的 Word 功能可能顯示不完美

場景二：做內容編輯系統

需要讓用戶上傳 Word 文檔，然后提取內容進行編輯。

選擇mammoth：

import mammoth from'mammoth';

async functionextractContent(file) {
    try {
        // 讀取文件
        const arrayBuffer = await file.arrayBuffer();

        // 自定義樣式映射
        const options = {
            styleMap: ["p[style-name='注意事項'] => div.alert-warning", "p[style-name='重要提示'] => div.alert-danger"],
        };

        const result = await mammoth.convertToHtml({ arrayBuffer }, options);
        document.getElementById('content').innerHTML = result.value;

        if (result.messages.length > 0) {
            console.warn('轉換有些小問題:', result.messages);
        }
    } catch (error) {
        console.error('轉換文檔失敗:', error);
    }
}

mammoth 的優點在這個場景下完全發揮出來：

1.  語義化 HTML：生成干凈的 HTML 結構
2.  樣式映射：可以自定義 Word 樣式到 HTML 元素的映射規則
3.  輕量轉換：處理速度非常快

進階技巧

docx-preview 的進階配置

renderAsync(docxBlob, container, styleContainer, {
    className: 'custom-docx', // 自定義CSS類名前綴
    inWrapper: true, // 是否使用包裝容器
    ignoreWidth: false, // 是否忽略頁面寬度
    ignoreHeight: false, // 是否忽略頁面高度
    breakPages: true, // 是否分頁顯示
    renderHeaders: true, // 是否顯示頁眉
    renderFooters: true, // 是否顯示頁腳
    renderFootnotes: true, // 是否顯示腳注
    renderEndnotes: true, // 是否顯示尾注
    renderComments: true, // 是否顯示評論
    useBase64URL: false, // 使用Base64還是ObjectURL處理資源
});

超實用技巧：如果只想把文檔渲染成一整頁（不分頁），只需設置breakPages: false！

mammoth 的自定義圖片處理

默認情況下，mammoth 會把圖片轉成 base64 嵌入 HTML。

在大型文檔中，這會導致 HTML 特別大。

更好的方案：

const options = {
    convertImage: mammoth.images.imgElement(function (image) {
        return image.readAsArrayBuffer().then(function (imageBuffer) {
            // 創建blob URL而不是base64
            const blob = newBlob([imageBuffer], { type: image.contentType });
            const url = URL.createObjectURL(blob);

            return {
                src: url,
                alt: '文檔圖片',
            };
        });
    }),
};

mammoth.convertToHtml({ arrayBuffer: docxBuffer }, options).then(/* ... */);

這樣一來，圖片以 Blob URL 形式加載，頁面性能顯著提升！

其他方案對比

說實話，在選擇這兩個庫之前，也有其他解決方案：

微軟 Office Online 在線預覽

利用微軟官方提供的 Office Online Server 或 Microsoft 365 的在線服務，通過嵌入 WebView 或 <iframe> 實現 DOCX 的在線渲染。

示例代碼：?

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=文檔URL"></iframe>

優點

•  格式高度還原：支持復雜排版、圖表、公式等。
•  無需本地依賴：純瀏覽器端實現。
•  官方維護：兼容性最好。

折騰一圈，還是docx-preview和mammoth這倆兄弟最實用。

它們提供了輕量級的解決方案，僅需幾十 KB 就能搞定 Word 預覽問題，而且不需要依賴外部服務，完全可以在前端實現。