解决Baidu/amis中OfficeViewer组件无法预览直接下载的问题

在使用Baidu/amis前端框架的OfficeViewer组件时，开发者可能会遇到一个常见问题：当尝试通过API加载文档时，浏览器会直接下载文件而不是在页面中预览。本文将深入分析这个问题并提供解决方案。

问题现象

当使用amis的OfficeViewer组件时，如果通过API接口动态获取文档内容，浏览器会直接触发文件下载行为，而不是在页面中显示文档预览。这与使用静态文件时的行为不同，后者能够正常预览。

根本原因

这个问题的核心在于响应头的设置。OfficeViewer组件需要特定的响应头才能正确识别和处理文档内容：

1. 当响应头中包含Content-Disposition: attachment时，浏览器会直接下载文件
2. 正确的响应头应该包含文档的MIME类型，如Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document

解决方案

要解决这个问题，需要从API服务端和前端配置两方面进行调整：

服务端调整

确保API返回的响应头包含正确的Content-Type，并且不包含强制下载的Content-Disposition头。例如对于Word文档：

Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document

前端调整

在amis的fetcher配置中，需要确保正确处理文件流响应：

1. 修改全局fetcher配置，避免触发下载行为
2. 确保文件流内容能够正确传递给OfficeViewer组件

最佳实践

1. 对于静态文件，可以直接引用文件路径
2. 对于动态内容，确保API返回正确的MIME类型
3. 在前端配置中，正确处理二进制响应
4. 测试不同文档类型（docx、xlsx、pptx等）的预览效果

总结

Baidu/amis的OfficeViewer组件功能强大，但要实现动态内容的预览功能，需要前后端配合确保正确的响应头设置。通过调整API返回的Content-Type和前端fetcher配置，可以解决直接下载而非预览的问题，为用户提供更好的文档查看体验。