快捷導(dǎo)航

JavaScript使用docx-preview和mammoth預(yù)覽Docx

更新時(shí)間：2025年04月18日 10:49:58 作者：沉浸式趣談

這篇文章主要為大家詳細(xì)介紹了兩個(gè)庫,即docx-preview和mammoth,利用它們,你就能在瀏覽器中完美預(yù)覽 Word 文檔,甚至連表格樣式,頁眉頁腳都原汁原味地呈現(xiàn)出來,下面我們來看看具體使用步驟吧

docx-preview VS mammoth

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

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

安裝簡單：

npm install docx-preview

基礎(chǔ)用法：

import { renderAsync } from 'docx-preview';

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

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

mammoth：簡潔至上的轉(zhuǎn)換器

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

npm install mammoth

使用也很簡單：

import mammoth from 'mammoth';

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

轉(zhuǎn)換出來的 HTML 非常干凈，只保留了文檔的語義結(jié)構(gòu)。

比如，Word 中的"標(biāo)題 1"樣式會(huì)變成 HTML 中的<h1>標(biāo)簽。

哪個(gè)更適合你？

場景一：做了個(gè)簡易 Word 預(yù)覽器

要實(shí)現(xiàn)在線預(yù)覽 Word 文檔，且跟 "Word" 長得一模一樣。

首選docx-preview：

import { renderAsync } from 'docx-preview';

async function previewDocx(fileUrl) {
    try {
        // 獲取文件
        const response = await fetch(fileUrl);
        const docxBlob = await response.blob();

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

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

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

不過也有些小坑：

文檔特別大時(shí)，渲染速度會(huì)變慢
一些復(fù)雜的 Word 功能可能顯示不完美

場景二：做內(nèi)容編輯系統(tǒng)

需要讓用戶上傳 Word 文檔，然后提取內(nèi)容進(jìn)行編輯。

選擇mammoth：

import mammoth from 'mammoth';

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

        // 自定義樣式映射
        const options = {
            styleMap: ["p[style-name='注意事項(xiàng)'] => 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('轉(zhuǎn)換有些小問題:', result.messages);
        }
    } catch (error) {
        console.error('轉(zhuǎn)換文檔失敗:', error);
    }
}

mammoth 的優(yōu)點(diǎn)在這個(gè)場景下完全發(fā)揮出來：

語義化 HTML：生成干凈的 HTML 結(jié)構(gòu)
樣式映射：可以自定義 Word 樣式到 HTML 元素的映射規(guī)則
輕量轉(zhuǎn)換：處理速度非常快

進(jìn)階技巧

docx-preview 的進(jìn)階配置

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, // 是否顯示評(píng)論
    useBase64URL: false, // 使用Base64還是ObjectURL處理資源
});

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

mammoth 的自定義圖片處理

默認(rèn)情況下，mammoth 會(huì)把圖片轉(zhuǎn)成 base64 嵌入 HTML。

在大型文檔中，這會(huì)導(dǎo)致 HTML 特別大。

更好的方案：

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

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

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

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

其他方案對(duì)比

說實(shí)話，在選擇這兩個(gè)庫之前，也有其他解決方案：

微軟 Office Online 在線預(yù)覽

利用微軟官方提供的 Office Online Server 或 Microsoft 365 的在線服務(wù)，通過嵌入 WebView 或 <iframe> 實(shí)現(xiàn) DOCX 的在線渲染。

示例代碼：

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

優(yōu)點(diǎn)

格式高度還原：支持復(fù)雜排版、圖表、公式等。
無需本地依賴：純?yōu)g覽器端實(shí)現(xiàn)。
官方維護(hù)：兼容性最好。

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

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

總結(jié)

docx-preview適合需要高還原度的場景，如文檔預(yù)覽系統(tǒng)；

而mammoth適合內(nèi)容提取、文檔到 HTML 的轉(zhuǎn)換場景，如內(nèi)容管理系統(tǒng)。

而微軟 Office Online 適合高還原公開文檔。

根據(jù)具體需求選擇合適的工具吧！

到此這篇關(guān)于JavaScript使用docx-preview和mammoth預(yù)覽Docx的文章就介紹到這了,更多相關(guān)JavaScript預(yù)覽Docx內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: