在日常需求中,一般情况下,单次点击下载文件数量一般是一个,当然也有多个文件同时下载的需求,由于浏览器机制,不支持直接多个文件下载,所有需要特殊处理
案例图
不多说了,直接上代码
//下载文件
downloadPapers() {
let obj = {
id: this.examId,
}
exportFile的接口(obj).then((res) => {
if (res.code == 200) {
this.$message({
message: '下载成功!',
type: 'success',
duration: 2000,
})
res.data.forEach((file, index) => {
this.downloadFile(
file,
index == 0 ? this.timestamp + '文件1' : this.timestamp + '文件2' //相当于是一个文件自定义的名称
)
})
}
})
},
//阻止href多文件下载只下载一个问题方法
downloadFile(url, filename) {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = filename
link.click()
}
}
xhr.send()
},