美文网首页
vue下载 使用js-file-download插件 vue下

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

作者: cjlynn | 来源:发表于2019-10-23 15:39 被阅读0次

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

    相关文章

      网友评论

          本文标题:vue下载 使用js-file-download插件 vue下

          本文链接:https://www.haomeiwen.com/subject/amskvctx.html