vue实现批量下载文件
作者：码字哥
这篇文章主要为大家详细介绍了vue实现批量下载文件的方法（不走后端接口的方法）,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
今天ld提了一个需求，说页面的列表里面有要下载的地址,然后点击批量下载。我思索片刻，给出了代码
1.这个是列表页面的代码
<!-- 这个是列表页面的代码 -->
<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.这个是选择框的代码
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的代码。
到此这篇关于vue实现批量下载文件的文章就介绍到这了,更多相关vue下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！