后台拿到需要下载的url数组,最开始想到的是在页面创建a标签,通过a标签的点击来实现下载
downloadFile(content, filename) {
// 创建隐藏的可下载链接
let eleLink = document.createElement('a')
eleLink.setAttribute('class', 'upload-file')
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', false, false)
eleLink.download = filename
eleLink.style.display = 'none'
// 字符内容转变成blob地址
// var blob = new Blob([content])
// eleLink.href = URL.createObjectURL(blob)
eleLink.href = content
// 触发点击
document.body.appendChild(eleLink)
eleLink.dispatchEvent(evt)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
}
后面发现这个又一个bug,通过循环进来的这个方法,只能下载数组最后一条
后面换了一个方法,使用iframe去下载,就成了?
let _this = this
for (let i = 0; i < _this.exportCrfData.length; i++) {
const iframe = document.createElement('iframe')
iframe.style.display = 'none' // 防止影响页面
iframe.style.height = 0 // 防止影响页面
iframe.src = _this.exportCrfData[i].url
document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求
// 之后删除
setTimeout(() => {
iframe.remove()
}, 1000)
}