前端实现批量下载文件

需求如下：下载选中的TXT文件，前提：存在TXT文件

 

HTML

<el-button style="margin-left:0;" icon="el-icon-download" @click="downloadTxt">下载txt</el-button>

JS

    // 下载 txt
    downloadTxt() {
    // selectDataTxt 为当前table选中的项
      if (this.selectDataTxt.length == 0) {
        this.$message("请先选择要下载的封装");
        return;
      }
      let txtArr = []
      // 判断有没有不存在的文件
      let strNotice = ''
      this.selectDataTxt.forEach(v => {
        if (v.devFilePath == null || v.devFilePath == '' || v.devFilePath == undefined) {
          strNotice += v.olbName + '、'
        } else {
          txtArr.push(v)
        }
      })
      // 如果有不存在的提示
      if (strNotice != '') {
        this.$message.error(`以下封装${strNotice.replace(/、$/,'')}不存在Device文件，请检查`);
      }
      // 调用方法下载
      txtArr.forEach(v => {
        let url = `${this.DEEHOWBASEURL}/api/v1/getView/${v.devFilePath}`
        this.downloadTxtNext(v.defFileName, url);
        // 下载过的取消选中
        this.$refs.multipleTable.toggleRowSelection(v,false);
      });
    },

    // 下载方法    
    downloadTxtNext(name, href) {
      var a = document.createElement("a"), //创建a标签
      e = document.createEvent("MouseEvents"); //创建鼠标事件对象
      e.initEvent("click", false, false); //初始化事件对象
      a.href = href; //设置下载地址
      a.download = name; //设置下载文件名
      a.dispatchEvent(e); //给指定的元素，执行事件click事件
    },