vue+axios 實現Excel下載
阿新 • • 發佈:2018-12-29
以前寫過關於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() }