vue中如何使用axios根据提交数据下载指定文件

关注

原创最新推荐文章于 2026-09-20 14:22:09 发布 236 阅读 AI 写同款· GEO 优化 ›

Vue使用axios实现：上传文件、下载文件 Axios 提供了一些方便的方法来上传文件，包括使用 FormData、设置 Content-Type 为 multipart/form-data 等。文件上传是将本地计算机中的文件发送到服务器的过程。在前端开发中，通常使用 <input type="file"> 元素来实现文件选择功能。用户通过点击这个元素，选择需要上传的文件。然后，前端代码将选中的文件传递给后端服务器。阅读详情

vue中如何使用axios根据传参数据提交下载相关数据文件

<el-button type="primary"  class="f-r ml-20 mb-20"  @click.native.prevent="handleDownload">导出</el-button>

handleDownload(){
        //导出
        let fileName='123';
        if(this.ID){
          this.toDownload(this.uploadUrl,this.ID,fileName+'.xlsx')
        }
    },
    toDownload(url, data, fileName) {
        return new Promise((resolve, reject) => {
            axios({
                method: "get",
                url: url,
                params:{ChlinicalID:data},
                responseType: 'blob'
            })
            .then(res => {
                let reader = new FileReader();
                let data = res.data;
                reader.onload = e => {
                    if (e.target.result.indexOf('Result') != -1 && JSON.parse(e.target.result).Result == false) {
                        // 进行错误处理
                    } else {
                        if (!fileName) {
                            let contentDisposition = res.headers['content-disposition'];
                            if (contentDisposition) {
                                fileName = window.decodeURI(res.headers['content-disposition'].split('=')[2].split("''")[1], "UTF-8");
                            }
                        }
                        this.executeDownload(data, fileName);
                    }
                };
                reader.readAsText(data);
                resolve(res.data);
            })
        });
    },
    //  模拟点击a 标签进行下载
     executeDownload(data, fileName) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    },