vue实现批量下载文件

<!-- 这个是列表页面的代码 -->
<el-table :data="userListShow" align="center"
           border highlight-current-row size="small" 
           style="width: 100%"
           stripe
            ref="table">
            <el-table-column 
              label="选择"
              width="45px"
              fixed
            >
              <template slot-scope="scope" > 
                <el-checkbox class="biaodiandian"  v-model="scope.row.selected" :label="scope.row" @change="clickChange(scope.row)"><i></i></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="barcode"  width="200px"  show-overflow-tooltip align="center" label="条码号"></el-table-column>
            <el-table-column prop="createTime"  width="200px" show-overflow-tooltip align="center" label="登记时间"></el-table-column>
</el-table>

data(){
    return(){
       selectedRows:[],  //这个是传递的复选框的值，因为是批量选择吗，所以给的是数组
    }
}   
 
 
 methods:{
 
     //选择文件 选择复选框
    clickChange(row) {
      if (row.selected) {
        this.selectedRows.push(row); // 选中时添加到数组中
      } else {
        const index = this.selectedRows.findIndex(item => item === row);
        if (index > -1) {
          this.selectedRows.splice(index, 1); // 取消选中时从数组中移除
        }
      }
    },
 
  
  }

<!-- 这个是批量下载的按钮->
<el-button type="warning" @click="handleDownload" round size="mini">下载体检报告</el-button>

methods:{
 
 
//这个可以直接赋值过去就能用，还有你的浏览器得开启允许批量下载，也就是第一次回
//触发一个提示说，是否允许批量下载多个文件，要点击允许就行了
async handleDownload() {
    //this.selectedRows 这个就是上面写的那个批量拿到的数据
    //row.reportUrl 这个就是列表数据里面的地址路径，
    const reportUrls = this.selectedRows.map(row => row.reportUrl);
    for (const reportUrl of reportUrls) {
      if (reportUrl) { //判断是否存在
        const link = document.createElement('a');
        link.href = reportUrl;
        link.download = reportUrl.substring(reportUrl.lastIndexOf('/') + 1);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        await new Promise((resolve) => setTimeout(resolve, 500));
        document.body.removeChild(link);
      }
    }
  },
 
}