前端传入参数,后台返回一个excel文件前端怎么办?

0)背景

我想导出一张2019年12月份并且hrID为2的所有销售信息的excel表,后台已经写好了,Controller返回的是一个ResponseEntity<byte[]>,简言之:我想要一张excel表,导出的内容为2019年12月份某一个人的销售情况

1)前端封装axios

let base = '';
export const downloadRequest = (url, params)=>{
  return axios({
    method: 'GET',
    url: `${base}${url}`,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    }
  });
}

2全局引入

import {downloadRequest} from "@/util/api"
Vue.prototype.downloadRequest = downloadRequest;

2写方法

exportWork(){
	this.exportWorkDisabled = true;//导出按钮开启禁用
	this.exprotWorkIcon = 'el-icon-loading';//导出按钮更换icon
	this.exportWorkText = '正在导出...';//导出按钮更换文字
	this.downloadRequest('后台接口?参数='+参数1+'&参数2='+参数2).then(data=>{
	      if(data){
	            const blob = new Blob([data]);
	            const aEle = document.createElement('a');// 创建a标签
	            const href = window.URL.createObjectURL(blob);// 创建下载的链接
	            aEle.href = href;
	            aEle.download = new Date()+"销售表.xls"; //下载后文件名
	            document.body.appendChild(aEle);
	            aEle.click();// 点击下载
	            document.body.removeChild(aEle);//下载完成移除元素
	            window.URL.revokeObjectURL(href);//释放掉blob对象
	            this.exportWorkDisabled = false;//导出按钮关闭禁用
	            this.exprotWorkIcon = 'fa fa-download';//导出按钮还原icon
	            this.exportWorkText = '导出';//导出按钮还原文字
	      }
	});
},

6)个人VX:N2548841623;QQ:2548841623;个人网站:nieqiang.xyz

5)完结撒花

发布了27 篇原创文章 · 获赞 3 · 访问量 2612

猜你喜欢

转载自blog.csdn.net/qq_42426937/article/details/103628555
今日推荐