【记录】【转载】简单易用,基于js或vue项目实现一次批量文件下载功能

之前使用的方法一直是使用js动态创建a标签,然后模拟a标签点击下载
后面项目需要点击下载多个文件, a标签就不满足需求了,
a标签点击只能下载一次文件,如果有多个文件就会自动覆盖,下载最后一个文件
网上搜索了很多经验, 自己记录一下, 借用一下大神的代码, 再次感谢!

<el-form-item>
    <el-button @click="table_export" type="success"
           :disabled="canExport()"
           plain icon="el-icon-upload2">数据导出</el-button>
</el-form-item>

// 点击下载
table_export() {
// 发送请求  这是自己封装的 请根据自己的来
	this.$http.GetEmployeeRequest.getExport({
      token: this.$utils.token(),
          id_list:JSON.stringify(this.newArr),
          name: this.formInline.name,
          mobile: this.formInline.mobile,
          check_status: this.formInline.check_status,
          sign_status: this.formInline.sign_status
      }).then(res=>{
          console.log(res)
          // 清空table表格复选框
          this.$refs.singleTable.clearSelection();
          if (res.data.code === 40000){
          // 由于地址是对象 所以这里转成了数组 这两个地址是两个文件
              let arr = []
              let download_url = this.$utils.BaseURL() + res.data.data.path
              let url = this.$utils.BaseURL() + res.data.data.zip_path
              // push 进 arr 并返回数组长度
              arr.push(download_url,url)
              // for 循环 动态创建 主要就是下面这几行代码
              for (var i = 0; i < arr.length; i++) {
                  const url = arr[i]
                  // 创建iframe元素, iframe元素是什么不用多说了吧
                  const iframe = document.createElement("iframe");
                  iframe.style.display = "none";  // 防止影响页面
                  iframe.style.height = 0;  // 防止影响页面
                  iframe.src = url;
                  document.body.appendChild(iframe);// 这一行必须，iframe挂在到dom树上才会发请求
              }
          }
      })
}

简简单单几行代码 也是费尽心思 不知道还有什么兼容性问题没有 希望日后再来补充, 以上!