做Docx预览,一定要做这个神库!!

简介: 本文来自【沉浸式趣谈】,个人博客 *https://yaolifeng.com* 同步更新。分享 `docx-preview` 和 `mammoth` 两大流行 Word 文档预览库的使用与对比。`docx-preview` 还原度极高,适合高保真文档预览;`mammoth` 转换为简洁语义化 HTML,适用于内容提取场景。两者轻量高效,无需依赖外部服务。根据需求选择工具,提升开发效率!
  • Hey, 我是 沉浸式趣谈
  • 本文首发于【沉浸式趣谈】,我的个人博客 https://yaolifeng.com 也同步更新。
  • 转载请在文章开头注明出处和版权信息。
  • 如果本文对您有所帮助,请 点赞评论转发,支持一下,谢谢!

只需几行代码,你就能在浏览器中完美预览 Word 文档,甚至连表格样式、页眉页脚都原汁原味地呈现出来。

接下来,给大家分享两个 Docx 预览的库:

docx-preview VS mammoth

docx-previewmammoth是目前最流行的两个 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);
    }
}

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

不过也有些小坑:

  1. 文档特别大时,渲染速度会变慢
  2. 一些复杂的 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 的优点在这个场景下完全发挥出来:

  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 = 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-previewmammoth这俩兄弟最实用。

它们提供了轻量级的解决方案,仅需几十 KB 就能搞定 Word 预览问题,而且不需要依赖外部服务,完全可以在前端实现。

写在最后

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

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

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

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

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

其他好文推荐

关于 Node,一定要学这个 10+万 Star 项目!

关于 MCP,这几个网站你一定要知道!

【完整汇总】近 5 年 JavaScript 新特性完整总览

目录
相关文章
|
4月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
275 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
6月前
|
前端开发
如何在React Router中进行路由重定向?
如何在React Router中进行路由重定向?
401 57
|
Java 编译器 API
java.lang.NoClassDefFoundError:无法初始化类XXX
java.lang.NoClassDefFoundError:无法初始化类XXX
247 0
|
存储 Java Apache
Spring Boot整合OpenOffice实现Word、Excel、PPT在线预览
Spring Boot整合OpenOffice实现Word、Excel、PPT在线预览
828 0
|
资源调度 JavaScript API
Vue3+TS+Vite开发组件库并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个包含35个常用UI组件和8个API功能函数的组件库`vue-amazing-ui`,并将其发布到npm,同时提供了组件库的安装使用说明和在线预览。
329 2
Vue3+TS+Vite开发组件库并发布到npm
成功解决:Could not resolve dependency: npm ERR! peer vue@“^3.0.2“ from vuex@4.0.2
这篇文章讨论了在使用npm安装依赖时遇到的一个常见问题,即无法解析依赖导致的"peer dependency"冲突错误。文章提供了几种解决方法,包括清除npm缓存、删除`node_modules`文件夹和`package-lock.json`文件,然后重新尝试安装,以解决版本冲突问题。
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
269 3
|
缓存 网络协议 Windows
FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
在国内访问GitHub不稳定时,可以采取三种解决方法。首先,通过网站(<https://ping.chinaz.com/github.com>)找到快速响应的GitHub IP,将其添加到本地hosts文件,然后刷新DNS缓存以正常访问。其次,使用代下载网站如(<https://d.serctl.com/>)下载GitHub上的压缩包。最后,可从国内镜像站点,如码云(<https://gitee.com/mirrors/ffmpeg>),下载FFmpeg等开源代码。这些方法有助于绕过访问限制,确保FFmpeg学习与开发的顺利进行。
433 3
FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
|
JavaScript Java
kkFileView在线文件预览与项目集成
kkFileView在线文件预览与项目集成
|
机器学习/深度学习 自然语言处理 算法
OpenCV主要功能及模块介绍(1)
OpenCV主要功能及模块介绍(1)。
416 2