1. 程式人生 > >vue+axios 實現Excel下載

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()
    }