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

最新推荐文章于 2024-03-05 21:03:59 发布

原创最新推荐文章于 2024-03-05 21:03:59 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍在Vue项目中，如何利用Axios通过传递参数来下载特定的数据文件，重点在于设置请求参数和触发文件下载。

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);
    },

传参： params:{ChlinicalID:data},