vue 批量下载文件，不走后端接口的方法

今天ld提了一个需求，说页面的列表里面有要下载的地址,然后点击批量下载。我思索片刻，给出了代码

1.这个是列表页面的代码

javascript 复制代码

<!-- 这个是列表页面的代码 -->
<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>

2.这个是选择框的代码

javascript 复制代码

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); // 取消选中时从数组中移除
        }
      }
    },

  
  }

3.好了，现在该批量下载了，之所以写上面两步，是因为得做批量选择的复选框，也就是得批量拿到数据

javascript 复制代码

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

4.这个按钮的方法

javascript 复制代码

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);
      }
    }
  },

}

好了兄弟们，到这里就结束了，上面的代码可以直接拿过就能用，不想要上面插件上面依赖的，就是vue的代码。

vue 批量下载文件，不走后端接口的方法

代码没有走后台的接口