vue实现iframe下载

使用 iframe 实现文件下载

在 Vue 中通过 iframe 实现文件下载，可以利用隐藏的 iframe 元素触发文件下载请求。这种方法适用于后端返回文件流或直接提供文件 URL 的场景。

实现步骤

创建隐藏的 iframe 元素，动态设置其 src 属性为文件下载 URL。通过 Vue 的 v-if 或动态创建 DOM 的方式控制 iframe 的显示与隐藏。

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = 'https://example.com/file.pdf'; // 替换为实际文件 URL
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 1000);
    }
  }
};
</script>

结合后端 API 下载

如果文件需要通过后端 API 获取（如需要认证或动态生成文件），可以将 API 响应转换为 Blob 并生成临时 URL。

downloadFile() {
  axios.get('/api/download', { responseType: 'blob' }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(iframe);
    }, 1000);
  });
}

注意事项

• 跨域限制：iframe 下载受同源策略限制，确保文件 URL 与当前页面同源或服务端已配置 CORS。
• 清理资源：使用 revokeObjectURL 释放创建的 Blob URL，避免内存泄漏。
• 用户体验：对于大文件下载，建议添加加载状态提示。
• 替代方案：现代浏览器推荐使用 <a> 标签的 download 属性实现下载，但 iframe 适用于需要静默下载的场景。

以上方法可根据实际需求调整，例如添加请求头、处理错误状态等。