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

最新推荐文章于 2023-09-20 20:41:35 发布

猿陆柒

最新推荐文章于 2023-09-20 20:41:35 发布

阅读量548

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42426937/article/details/103628555

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

`方法一`

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 = '导出';//导出按钮还原文字
	      }
	});
},

`方法二`

后台用GET方式，通过字符串拼接实现传参，实例：

后台

@GetMapping("/get")//只是个例子不要太在意细节
public ResponseEntity<?,?> get(String s1,String s2,String s3){
	return ResponseEntity<?,?>();
}

前端

<el-button @click="downLoad()"></el-button>
<!-- 反正具体就这么个意思，纯手写的 -->
...
...
<script>
export default{
	data:{
		return(){
			s1:"",
			s2:"",
			s3:""
		}
	}
	methods:{
		downLoad(){
			location.href = "/get?s1="+s1+"&s2="+s2+"&s3"+s3
		}
	}
}
</script>