这个是我下载文件的方法,我还需要一个批量下载的功能,是一个按钮的,哪位可告知一下
dowloadAgencyattach(data) {
let fileIndex = data.fileRealName.lastIndexOf('/') + 1;
let fileRealNewName = data.fileRealName.substring(fileIndex, data.fileRealName.length);
axios.get(this.$vueAppBaseApi + '/resource/' + fileRealNewName,
{
responseType: 'blob'
}).then(res => {
if (res.status === 200) {
let types = ''
const index1 = data.fileRealName.lastIndexOf('.') + 1
const index2 = data.fileRealName.length
const file_type = data.fileRealName.substring(index1, index2)
// 判断文件类型,补充type
if (file_type === 'xlsx' || file_type === 'xls') {
types = 'application/vnd.ms-excel'
} else if (file_type === 'png') {
types = 'application/x-png'
} else if (file_type === 'jpg') {
types = 'application/x-jpg'
} else if (file_type === 'jpeg') {
types = 'image/jpeg'
}
// res.data是后台返回的二进制数据,type:types为下载的数据类型
const blob = new Blob([res.data], {
type: types
})
const downLoadEle = document.createElement('a')
const href = URL.createObjectURL(blob)
downLoadEle.href = href
// ooo为自定义文件名
downLoadEle.download = fileRealNewName
document.body.appendChild(downLoadEle)
downLoadEle.click()
document.body.removeChild(downLoadEle)
window.URL.revokeObjectURL(href)
}
})
}
要实现批量下载,你需要将下载链接保存到一个数组中,然后将数组中的每个链接下载到计算机上。
1、创建一个数组来保存文件链接。
2、修改 dowloadAgencyattach(data) 方法,将从后端获取文件的代码块移动到一个新的方法中,例如 getFileData(url)。
3、在 dowloadAgencyattach(data) 中,将获取到的文件链接添加到数组中,然后调用一个新的方法 batchDownload(files),将保存文件链接的数组传递给它。
4、在 batchDownload(files) 方法中,使用 for 循环或 forEach 方法遍历保存文件链接的数组,并调用 getFileData(url) 方法来下载每个文件。
下面是修改后的 dowloadAgencyattach(data) 方法和新方法 getFileData(url) 和 batchDownload(files) 方法的代码:
// 获取文件数据
getFileData(url) {
return axios.get(url, { responseType: 'blob' })
.then(res => {
if (res.status === 200) {
return res.data;
} else {
throw new Error('Failed to download file');
}
});
},
// 单个文件下载
dowloadAgencyattach(data) {
let fileIndex = data.fileRealName.lastIndexOf('/') + 1;
let fileRealNewName = data.fileRealName.substring(fileIndex, data.fileRealName.length);
const fileUrl = this.$vueAppBaseApi + '/resource/' + fileRealNewName;
this.filesToDownload.push({ url: fileUrl, name: fileRealNewName });
},
// 批量下载
batchDownload(files) {
files.forEach(file => {
this.getFileData(file.url).then(fileData => {
let types = ''
const index1 = file.name.lastIndexOf('.') + 1
const index2 = file.name.length
const file_type = file.name.substring(index1, index2)
// 判断文件类型,补充type
if (file_type === 'xlsx' || file_type === 'xls') {
types = 'application/vnd.ms-excel'
} else if (file_type === 'png') {
types = 'application/x-png'
} else if (file_type === 'jpg') {
types = 'application/x-jpg'
} else if (file_type === 'jpeg') {
types = 'image/jpeg'
}
// res.data是后台返回的二进制数据,type:types为下载的数据类型
const blob = new Blob([fileData], {
type: types
})
const downLoadEle = document.createElement('a')
const href = URL.createObjectURL(blob)
downLoadEle.href = href
downLoadEle.download = file.name
document.body.appendChild(downLoadEle)
downLoadEle.click()
document.body.removeChild(downLoadEle)
window.URL.revokeObjectURL(href)
});
});
},
// 调用方法
this.filesToDownload = []; // 保存要下载的文件链接和名称的数组
this.dowloadAgencyattach(data1);
this.dowloadAgencyattach(data2);
// 添加需要下载的文件
this.batchDownload(this.filesToDownload);
那应该 ,把创建 a 标签 那段 写道 循环里