responseType: 'blob': 不可缺少
```
function exportLogData(data, file_name) {
axios({
method: 'post',
url: serverIp + '/sysLog/download',
responseType: 'blob',
data,
headers: { 'Access-Control-Allow-origin': '*', 'Content-Type': 'application/json; charset=UTF-8', 'Token':JSON.stringify(getToken())}
}).then((res) => {
if (res && res.status === 200) {
const blob = new Blob([res.data])
let brower = '';
if (navigator.userAgent.indexOf('Edge') > -1){
brower = 'Edge'
}
if ('download' in document.createElement('a')){
if (brower === 'Edge') {
navigator.msSaveBlob(blob, file_name);
return
}
let url = window.URL.createObjectURL(res.data);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', file_name);
if(!document.getElementById(file_name)) {
document.body.appendChild(link);
}
link.click();
URL.revokeObjectURL(link.herf);
document.body.removeChild(link)
} else {
//IE10+下載
navigator.msSaveBlob(blob, file_name)
}
}
}).catch(error => {
console.log(error)
})
}
```
后端
~~~
@GetMapping("/download-report/{id}")
@ApiOperation("下載報告:/opsTestPlan/download-report/{id}")
public ResponseData downloadReport(HttpServletResponse response, @PathVariable Long id) {
ObsObject obsObject = testPlanService.downloadReport(id);
try(InputStream input = obsObject.getObjectContent(); OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());){
response.setContentType("application/octet-stream");
int len;
byte[] b = new byte[1024];
while ((len=input.read(b)) != -1){
outputStream.write(b, 0, len);
}
outputStream.flush();
}catch (Exception ex) {
throw new ServiceException(ex.getCause());
}
return null;
}
~~~
- vue
- 為什么要學vue
- 數據雙向綁定
- vue指令
- v-bind創建HTML節點屬性
- v-on綁定事件
- v-cloak
- v-text
- v-for和key屬性
- v-if和v-show
- 案例1
- 自定義指令
- vue樣式
- vue生命周期
- vue過濾器
- 自定義鍵盤修飾符
- 跨域請求
- vue組件
- 組件基礎
- 引入vue文件組件
- 引入render函數作為組件
- 兄弟間組件通信
- 組件函數數據傳遞練習
- 路由
- 數據監聽
- webpack
- vue校驗
- vue筆記
- form表單中input前部分默認輸入,切不可修改
- mixins
- 部署到nginx
- scope
- render
- 下載文件
- vue動態組件
- axios
- Promise
- vue進階
- node-vue-webpack搭建
- vue事件
- 插槽
- vuex
- vuex基礎
- vuex命名空間
- HTML遞歸?
- this.$nextTick異步更新dom
- elementui
- table
- 修改element ui樣式
- form
- 優質博客
- vuex state數據與form元素綁定
- es6
- Promise