Vue中axios实现文件流下载

Vue中axios实现文件流下载

前言

后端以文件流的形式返回数据，前端多选数据导出excel文件

🔖以文件流返回

		String fileName = "PersonalCertInfo";
		OutputStream out =null;
		try {
			out = response.getOutputStream();
			response.reset();
			response.addHeader("Access-Control-Allow-Origin", "*");
			response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
			response.addHeader("Content-Disposition", "attachment; filename=" + fileName + ".xlsx");
			response.setContentType("application/vnd.ms-excel;charset=utf-8");
			workbook.write(out);
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			out.flush();
			out.close();
		}

🔖 axios请求封装

   request(data) {
        let reqData = data.data || {};
        //支持表达式作为域名解析
        data.url =this.parseUrl(data.url);
        //统一拼接域名接口
        if (data.url.indexOf('http') == -1) {
            data.url = domainName + data.url;
        }
        let requestData = {
            url: data.url,
            data: reqData,
            method: data.method || 'GET',
            params: data.params || {},
            onUploadProgress: data.onUploadProgress || null,
            headers: data.headers || '',
            responseType: data.responseType || 'json'
        };
        return axios(requestData);
    },
    // 文件导出
    export(url, data){
        return this.request({ url, data, method: "POST" ,responseType:"blob"});
    }

定义Api接口

  exportCmPersonalCertAndAttach(data, cb) {
    req.export(hse + `/sim/cmPersonalCert/v1/export`, data).then(req => {
      cb(req);
    });
  }

Vuex封装

exportCmPersonalCertAndAttach({ commit, state }, data) {
    return new Promise((resolve, reject) => {
      card.exportCmPersonalCertAndAttach(data, response => {
  resolve(response);
      });
   });
  }

调用导出excel文件函数

handleExport() {
      if (this.multipleSelection) {
        this.$store
          .dispatch(
            "card/exportCmPersonalCertAndAttach",
            this.multipleSelection
          )
          .then((response) => {
            let blob = new Blob([response.data]);
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `个人证件信息表.xlsx`; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
            this.$message.success(`导出成功`);
          })
          .catch(e => {
            this.$message.error(`error${e}`);
          });
      }

数据展示

点击导出，弹出另存为文件

导出效果