前端实现 Word 文档在线预览的实用方案
在 Web 开发中，经常需要让用户直接在浏览器里查看 Word 文档（.doc 或 .docx）。市面上虽然有不少方案，但很多要么版本过老不再维护，要么依赖复杂的后端转换服务。今天分享一个轻量级的客户端解决方案，利用微软官方的在线服务即可实现。
方案对比
主要有两种思路：
- 后端转换：服务端将 doc 转为 pdf 或 html 再返回。优点是兼容性好，缺点是增加了服务器负载和开发成本。
- iframe 嵌入：直接调用微软 Office Online Viewer。优点是零后端处理，实现简单；缺点是对文件访问权限有要求。
下面重点说第二种，这也是目前最省事的办法。
核心实现
我们需要使用 <iframe> 标签，并将处理后的文件地址赋值给 src 属性。
<iframe :src="previewUrl" frameborder="0" width="100%" height="600px"></iframe>
关键在于如何构造 previewUrl。微软提供了一个接口 https://view.officeapps.live.com/op/embed.aspx，只要把文件的公网 URL 传进去即可。
// 假设这是你的文件在线地址
const docUrl = 'https://example.com/files/document.docx';
// 构建预览链接
this.previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`;
注意事项
在实际落地时，有几个坑需要注意：
- 必须是公网可访问地址：这个服务不支持本地路径（file://）或局域网 IP。文件必须部署在能公开访问的服务器上。
- 协议限制：建议目标文件地址使用 HTTPS，否则在某些浏览器环境下可能无法加载。
- 编码处理：URL 中的特殊字符一定要做 encodeURIComponent 处理，防止解析错误。
如果业务对安全性要求极高，或者文件不能放在公网，那还是得考虑后端转码的方案。但对于大多数展示型需求，这个 iframe 方案足够快且稳定。
