市面上关于文档预览的方案不少，但很多对旧版 .doc 支持不佳，甚至已被废弃。今天直接切入正题，聊聊如何在前端实现 Word 文档的在线预览。
主要有两种思路：一是后端转码，将 .doc 转为 .docx 后返回；二是利用第三方服务，通过 iframe 直接加载。这里重点讲第二种，因为它更轻量，无需引入复杂的转换库。
核心方案：Office Online Viewer
微软提供了 Office Online Viewer 服务，可以直接在浏览器中渲染 Word、Excel、PPT 等文件。我们只需要构造一个特定的 embed 链接，然后嵌入到 <iframe> 中即可。
<iframe :src="previewUrl" frameborder="0"></iframe>
关键在于 previewUrl 的生成逻辑。我们需要将文件的公网访问地址传递给微软的服务接口。
const docUrl = "https://example.com/files/document.doc";
// 注意：必须使用 encodeURIComponent 处理 URL 参数
this.previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`;
将处理后的地址赋值给 iframe 的 src 属性，页面加载时就会自动调用微软的在线预览服务。
注意事项与踩坑
-
地址必须是公网可访问的 该服务不支持本地路径或内网 IP（如
file:///或192.168.x.x）。文件必须托管在 HTTPS 协议的线上服务器上，否则无法加载。 -
数据隐私风险 使用此方案意味着文件内容会被发送到微软的服务器进行渲染。如果涉及敏感数据或内部机密文档，请务必评估合规性，避免使用第三方公开服务。
-
网络依赖 由于依赖外部服务，预览效果受网络连接质量影响。若用户处于弱网环境，可能会出现加载缓慢的情况。
-
格式兼容性 虽然支持 .doc 和 .docx，但复杂排版或特殊字体可能会在渲染时出现细微差异，建议在实际项目中先做小范围测试。
这种方案的优势在于开发成本极低，几乎不需要后端配合。只要解决了文件存储和公网访问的问题，前端就能快速落地预览功能。当然，如果有更稳定的私有化部署需求，还是建议考虑后端转码方案。
