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