vue+element 通过post方法实现blob文件流下载

最新推荐文章于 2024-07-22 16:26:33 发布

遇事不决AI解决

最新推荐文章于 2024-07-22 16:26:33 发布

阅读量972

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47970316/article/details/122821674

版权

 handleUp(file, fileList) {
      if (this.excel1 == "" || this.excel2 == "") {
        this.$alert(
          "x x x文件与x x x文件表必须上传",
          "警告",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `上传失败！`,
              });
              return;
            }
          }
        )
        return
      }
      var param = new FormData();
      var config = {
              headers: {'Content-Type': 'multipart/form-data'},
              responseType: "blob"
        }
      param.append("excel1", this.excel1);
      param.append("excel2", this.excel2); 
      this.excel3.forEach((file) => {
        param.append("excel3", file);
        });
      axios
        .post("url", param,config) //由于只通过post方法实现文件下载，因此需要配置文件头
        .then((res) => {
          console.log(res);
          //当文件上传不符合后端文件需求，后端返回相关参数供前端解析，以下的操作是跟后端协商
          if(res.headers.responsestatus == "False"){
            this.$alert(
          `${decodeURI(res.headers.responsemessage)}`,
          "警告",
          {
            confirmButtonText: "确定",
          }
        )     
        this.$refs.bugetupload.clearFiles()
        this.$refs.claimupload.clearFiles()
        this.$refs.file3upload.clearFiles()
        return 
        }
          const blob = new Blob([res.data],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
          //兼容性处理
          let urlObject = window.URL||window.webkitURL||window;
          let url = urlObject.createObjectURL(blob);
          //增加a元素
          const downloadEle = document.createElement('a');
          //给a元素添加href属性，实现文件下载
          downloadEle.href = url;
          //下载的文件名命名
          downloadEle.download = decodeURI(res.headers.filename)  //解析后端返回来的文件名
          //a元素绑定单击事件
          downloadEle.click();
          //下载完成清空url
          urlObject.revokeObjectURL(url);
          //以下是实现上传文件成功后，清空文件
          this.$refs.bugetupload.clearFiles()
          this.$refs.claimupload.clearFiles()
          this.$refs.file3upload.clearFiles()
        })
        .catch((err) => {
          console.log(err);
        });
    },