JS在线预览Word文档：技术方案与最佳实践

为什么需要JS在线预览Word文档？

在Web应用中，用户经常需要查看Word文档（.doc/.docx）而无需下载到本地。传统的下载后打开方式体验不佳，因此前端在线预览方案应运而生。使用JavaScript实现预览可以保持用户在当前页面操作，提高交互流畅性。

方案一：使用Office Online（官方嵌入）

Microsoft提供了Office Online服务，可以通过iframe直接嵌入Word文档。只需将文档上传到SharePoint或OneDrive，获取共享链接，然后使用如下代码嵌入：

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=文档URL' width='100%' height='600px' frameborder='0'></iframe>

优点：保持原格式，支持所有Office特性。缺点：需要联网且文档必须可公开访问，对私有文档需额外处理。

方案二：使用mammoth.js转换为HTML

mammoth.js是一个JavaScript库，可将.docx文件转换为HTML。它支持基本样式和结构，但无法保留复杂格式。使用示例：

// 安装: npm install mammoth
const mammoth = require('mammoth');
fetch('document.docx')
  .then(r => r.arrayBuffer())
  .then(buffer => mammoth.convertToHtml({arrayBuffer: buffer}))
  .then(result => document.getElementById('output').innerHTML = result.value);

优点：纯前端，无需服务器。缺点：转换效果有限，不支持.docx以外的格式。

方案三：使用docx-preview直接渲染

docx-preview是一个基于zip.js和xml.js的库，能够直接在浏览器中渲染.docx文件，更接近原样。用法：

// 安装: npm install docx-preview
import { renderAsync } from 'docx-preview';
fetch('document.docx')
  .then(res => res.arrayBuffer())
  .then(buffer => renderAsync(buffer, document.getElementById('container')));

优点：渲染质量较高，支持分页、表格等。缺点：体积较大，不适合移动端。

方案四：后端转换服务

如果前端方案无法满足需求，可以借助后端服务（如LibreOffice、Apache POI）将文档转换为PDF或图片，再传给前端预览。例如，使用Docker部署LibreOffice服务，通过REST API转换。

优点：转换质量最高。缺点：需要维护后端服务器，增加延迟。

选型建议

• 简单预览且文档公开：Office Online嵌入最佳。
• 简约文档、快速开发：mammoth.js或docx-preview。
• 企业级应用、格式要求高：后端转换方案。

实际项目中可以先试用docx-preview，若效果不理想再切换至后端方案。