vue实现iframe下载
使用 iframe 实现文件下载
在 Vue 中通过 iframe 实现文件下载，可以利用隐藏的 iframe 元素来触发文件下载请求。这种方法适用于后端返回文件流或直接文件链接的场景。
创建隐藏的 iframe
在 Vue 组件中添加一个隐藏的 iframe 元素，用于触发下载请求：
<iframe ref="downloadIframe" style="display: none;"></iframe>通过方法触发下载
在 methods 中定义下载方法，设置 iframe 的 src 属性为文件下载地址：
methods: {
downloadFile(url) {
this.$refs.downloadIframe.src = url;
}
}处理动态 URL 下载
如果需要传递动态参数或处理权限验证，可以在下载前先获取可下载的 URL：
async downloadWithAuth(fileId) {
const downloadUrl = await getDownloadUrl(fileId); // 调用 API 获取下载地址
this.$refs.downloadIframe.src = downloadUrl;
}后端配合实现
后端需要正确设置响应头以触发浏览器下载行为：
Content-Disposition: attachment; filename="filename.ext"
Content-Type: application/octet-stream替代方案：使用 window.open
对于简单的下载需求，也可以直接使用 window.open：
window.open(downloadUrl, '_blank');注意事项
- 跨域问题：确保下载地址与当前页面同源或 CORS 配置正确
- 安全性：验证下载地址防止 XSS 攻击
- 用户体验：对于大文件下载建议添加加载状态提示
这种方法避免了页面跳转，提供更流畅的用户体验，适合在单页应用中实现文件下载功能。
