vue+axios 实现Excel下载

以前写过关于Springboot提供Excel文件下载的博客:https://blog.csdn.net/zc_ad/article/details/85242556 ,当点击下载的api地址时，就可以直接下载，或我们在前端页面直接使用<a>标签，href指向下载地址，我们也可以进行下载。

但是....,<a>标签无法进行设置表头，也无法进行参数的传递，确实是一个头疼的问题。此时，我们就需要使用axios进行文件的下载操作。

1.修改后端response的头部

response.setHeader("Content-type","application/octet-stream");  //将文件设置为流的形式进行传递，返回的是二进制形式
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition","attachment;filename="+new String("工资模版".getBytes("UTF-8"),"ISO-8859-1")+".xls");

2.axios代码

设置我们想要的axios的global参数：

    axios.defaults.baseURL = 'http://localhost:7000/micro';
    axios.defaults.headers.common['school_id'] = "1111";
    axios.defaults.headers.common['account_id'] = "1001";
    axios.defaults.headers.post['content-Type'] = 'application/json;charset=UTF-8';

axis请求，注意responseType: 'blob'，blob代码返回的二进制格式。主要就是将数据指定到一个url上，在模拟<a>标签的点击操作，来实现文件的下载。

    axiosGetTemplate(){
	axios.get("/template",{responseType: 'blob'}).then(response=>{
	    this.download(response);
	}).catch(error=>{
	    console.log(error);
	})
    },

    download(data) {
	if(!data){
	    return
	}
	var blob = new Blob([data.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
	var url = window.URL.createObjectURL(blob);
	var aLink = document.createElement("a");
	aLink.style.display = "none";
	aLink.href = url;
	//aLink.setAttribute("数据模版", "数据模版.xls");
	document.body.appendChild(aLink)
	aLink.click()
    }

vue+axios 实现Excel下载

猜你喜欢