vue下载 使用js-file-download插件 vue下

2019-10-23  本文已影响0人  cjlynn

问题引入: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(() -> {...});
}
上一篇下一篇

猜你喜欢

热点阅读