问题引入：vue下载出现文件损坏的问题
在下载的时候出现一个问题 下载的文件被损坏，无法打开，开始以为是后台的问题，是不是文件没关闭什么的，后来查了发现是前端界面中JS的问题。
因为误删除axios.post中的第二个参数{}，导致下载的文件损坏
_this.$axios.post(_this.$FrontPaths.docDownload(row.id), {}, {
responseType: 'blob'
})
下面的前端案例可以直接使用
npm install js-file-download
VUE前端界面
<el-table-column label="操作" fixed="right" width="100px">
<template slot-scope="scope">
<el-button size="small" type="text" @click="handleDownload(scope.$index, scope.row)" :loading="loading1">下载</el-button>
</template>
</el-table-column>
JS
handleDownload(index, row) {
let _this = this;
_this.loading1 = true;
_this.$axios.post(_this.$FrontPaths.docDownload(row.id), {}, {
responseType: 'blob'
}).then((res) => {
_this.loading1 = false;
_this.downloadFile(res);
}).catch(() => {
_this.loading1 = false;
_this.$message.error("文件已清除，无法下载此文件");
});
},
downloadFile(res) {
const fileName = res.headers['content-disposition'];
let name = fileName.slice(fileName.indexOf("filename=") + 9);
name = decodeURI(name);
let fileDownload = require('js-file-download')
fileDownload(res.data, name)
}
后台
springboot <version>2.1.0.RELEASE</version>
@PostMapping("/save")
public RsJson save(@RequestParam(value = "fileList", required = false) MultipartFile[] uploadingFiles, @Validated Meet ps, HttpServletRequest request) {
return json(() -> {...});
}
