做Docx预览，一定要做这个神库！！

Hey, 我是沉浸式趣谈
本文首发于【沉浸式趣谈】，我的个人博客 https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。
如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！

只需几行代码，你就能在浏览器中完美预览 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 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('渲染文档时出错:', error);

    }

}

效果很赞！文档分页显示，目录、页眉页脚、表格边框样式都完美呈现。

不过也有些小坑：

文档特别大时，渲染速度会变慢
一些复杂的 Word 功能可能显示不完美

场景二：做内容编辑系统

需要让用户上传 Word 文档，然后提取内容进行编辑。

选择mammoth：

import mammoth from 'mammoth';

async function extractContent(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 的优点在这个场景下完全发挥出来：

语义化 HTML：生成干净的 HTML 结构
样式映射：可以自定义 Word 样式到 HTML 元素的映射规则
轻量转换：处理速度非常快

进阶技巧

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 = new Blob([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 预览问题，而且不需要依赖外部服务，完全可以在前端实现。

写在最后

docx-preview适合需要高还原度的场景，如文档预览系统；

而mammoth适合内容提取、文档到 HTML 的转换场景，如内容管理系统。

而 微软 Office Online 适合高还原公开文档。

根据具体需求选择合适的工具吧！

后面打算写关于 powerpoint、excel、pdf、图片系列，需要的小伙伴可以关注一波！