vue中的批量下载（downloadFile）

最新推荐文章于 2025-07-07 10:46:42 发布

Software攻城狮

最新推荐文章于 2025-07-07 10:46:42 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue2

本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/99359841

Vue2 专栏收录该内容

32 篇文章

订阅专栏

本文介绍在Vue中实现批量文件下载的方法，通过自定义mixin组件内的downloadFile方法，利用iframe触发下载，避免了二次下载的问题，并讨论了后端数据流处理及文件状态判断，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中的批量下载（downloadFile）

//mixin.js
export default {
    method: {
        downloadFile(url) {
            try {
                let eleIF = document.createElement('iframe');
                eleIF.src = url;
                eleIF.style.display = 'none';
                document.body.appendChild(eleIF);
                //防止下载2次
                setTimeout(function () {
                    document.body.removeChild(eleIF)
                }, 1000);
            } catch(e) {
                console.log(e);
            }
        }
    }
}


## 关于批量下载的说明：

1.后端一般返回数据流，不需要发请求，直接 this.downloadFile = url ,具体路径与单个下载方式相同
2.要对下载的文件进行判断，看是否已经生成完毕，一般由后端返回一个状态
3若是没有生成完，点击下载，则会没有反应，而使用window.location.href时，则会跳到一个类似空白页面，用户体验不佳

例：
在这里插入图片描述