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

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

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

<!-- 这个是列表页面的代码 -->
<el-table :data="userListShow" align="center"border highlight-current-row size="small" style="width: 100%"striperef="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.这个是选择框的代码

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.好了，现在该批量下载了，之所以写上面两步，是因为得做批量选择的复选框，也就是得批量拿到数据

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

4.这个按钮的方法

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的代码。