只需几行代码，你就能在浏览器中完美预览 Word 文档，甚至连表格样式、页眉页脚都原汁原味地呈现出来。
接下来，给大家分享两个 Docx 预览的库：

docx-preview VS mammoth

1. docx-preview

复制代码

和

1. mammoth

复制代码

是目前最流行的两个 Word 文档预览库，它们各有特色且适用于不同场景。

docx-preview：还原度爆表的选择

安装简单：

1. npm install docx-preview

复制代码

基础用法：

1. import { renderAsync } from 'docx-preview';
   
2. 
   
3. // 获取到docx文件的blob或ArrayBuffer后
   
4. renderAsync(docData, document.getElementById('container')).then(() => console.log('文档渲染完成！'));

复制代码

试了试后，这个库渲染出来的效果简直和 Office 打开的一模一样！连段落格式、表格样式、甚至是分页效果，都完美呈现。

mammoth：简洁至上的转换器

mammoth 的思路完全不同，它把 Word 文档转成干净的 HTML：

1. npm install mammoth

复制代码

使用也很简单：

1. import mammoth from 'mammoth';
   
2. 
   
3. mammoth.convertToHtml({ arrayBuffer: docxBuffer }).then(result => {
   
4.     document.getElementById('container').innerHTML = result.value;
   
5.     console.log('转换成功，但有些警告：', result.messages);
   
6. });

复制代码

转换出来的 HTML 非常干净，只保留了文档的语义结构。
比如，Word 中的"标题 1"样式会变成 HTML 中的

1. <h1>

复制代码

标签。

哪个更适合你？


场景一：做了个简易 Word 预览器

要实现在线预览 Word 文档，且跟 "Word" 长得一模一样。
首选

1. docx-preview

复制代码

：

1. import { renderAsync } from 'docx-preview';
   
2. 
   
3. async function previewDocx(fileUrl) {
   
4.     try {
   
5.         // 获取文件
   
6.         const response = await fetch(fileUrl);
   
7.         const docxBlob = await response.blob();
   
8. 
   
9.         // 渲染到页面上
   
10.         const container = document.getElementById('docx-container');
    
11.         await renderAsync(docxBlob, container, null, {
    
12.             className: 'docx-viewer',
    
13.             inWrapper: true,
    
14.             breakPages: true,
    
15.             renderHeaders: true,
    
16.             renderFooters: true,
    
17.         });
    
18. 
    
19.         console.log('文档渲染成功！');
    
20.     } catch (error) {
    
21.         console.error('渲染文档时出错:', error);
    
22.     }
    
23. }

复制代码

效果很赞！文档分页显示，目录、页眉页脚、表格边框样式都完美呈现。
不过也有些小坑：

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

场景二：做内容编辑系统

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

1. mammoth

复制代码

：

1. import mammoth from 'mammoth';
   
2. 
   
3. async function extractContent(file) {
   
4.     try {
   
5.         // 读取文件
   
6.         const arrayBuffer = await file.arrayBuffer();
   
7. 
   
8.         // 自定义样式映射
   
9.         const options = {
   
10.             styleMap: ["p[style-name='注意事项'] => div.alert-warning", "p[style-name='重要提示'] => div.alert-danger"],
    
11.         };
    
12. 
    
13.         const result = await mammoth.convertToHtml({ arrayBuffer }, options);
    
14.         document.getElementById('content').innerHTML = result.value;
    
15. 
    
16.         if (result.messages.length > 0) {
    
17.             console.warn('转换有些小问题:', result.messages);
    
18.         }
    
19.     } catch (error) {
    
20.         console.error('转换文档失败:', error);
    
21.     }
    
22. }

复制代码

mammoth 的优点在这个场景下完全发挥出来：

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

进阶技巧


docx-preview 的进阶配置

1. renderAsync(docxBlob, container, styleContainer, {
   
2.     className: 'custom-docx', // 自定义CSS类名前缀
   
3.     inWrapper: true, // 是否使用包装容器
   
4.     ignoreWidth: false, // 是否忽略页面宽度
   
5.     ignoreHeight: false, // 是否忽略页面高度
   
6.     breakPages: true, // 是否分页显示
   
7.     renderHeaders: true, // 是否显示页眉
   
8.     renderFooters: true, // 是否显示页脚
   
9.     renderFootnotes: true, // 是否显示脚注
   
10.     renderEndnotes: true, // 是否显示尾注
    
11.     renderComments: true, // 是否显示评论
    
12.     useBase64URL: false, // 使用Base64还是ObjectURL处理资源
    
13. });

复制代码

超实用技巧：如果只想把文档渲染成一整页（不分页），只需设置

1. breakPages: false

复制代码

！

mammoth 的自定义图片处理

默认情况下，mammoth 会把图片转成 base64 嵌入 HTML。
在大型文档中，这会导致 HTML 特别大。
更好的方案：

1. const options = {
   
2.     convertImage: mammoth.images.imgElement(function (image) {
   
3.         return image.readAsArrayBuffer().then(function (imageBuffer) {
   
4.             // 创建blob URL而不是base64
   
5.             const blob = new Blob([imageBuffer], { type: image.contentType });
   
6.             const url = URL.createObjectURL(blob);
   
7. 
   
8.             return {
   
9.                 src: url,
   
10.                 alt: '文档图片',
    
11.             };
    
12.         });
    
13.     }),
    
14. };
    
15. 
    
16. mammoth.convertToHtml({ arrayBuffer: docxBuffer }, options).then(/* ... */);

复制代码

这样一来，图片以 Blob URL 形式加载，页面性能显著提升！

其他方案对比

说实话，在选择这两个库之前，也有其他解决方案：
微软 Office Online 在线预览
利用微软官方提供的 Office Online Server 或 Microsoft 365 的在线服务，通过嵌入

1. WebView

复制代码

或

1. <iframe>

复制代码

实现 DOCX 的在线渲染。
示例代码：

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

复制代码

优点

• 格式高度还原：支持复杂排版、图表、公式等。
  
• 无需本地依赖：纯浏览器端实现。
  
• 官方维护：兼容性最好。
  

折腾一圈，还是

1. docx-preview

复制代码

和

1. mammoth

复制代码

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

总结

1. docx-preview

复制代码

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

1. mammoth

复制代码

适合内容提取、文档到 HTML 的转换场景，如内容管理系统。
而 微软 Office Online 适合高还原公开文档。
根据具体需求选择合适的工具吧！
到此这篇关于JavaScript使用docx-preview和mammoth预览Docx的文章就介绍到这了,更多相关JavaScript预览Docx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339893ezr.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！