对于文件的下载,目前知道后端有两种返回形式:
① 返回blob文本流
②返回文件的url链接
- 直接调用a标签进行下载(a标签只支持非图片和非PDF下载,这两种格式a标签只提供查看功能)
<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a>
在a标签中的href中加上文件的地址;
downloa属性可设置下载文件的名称,为必须值。
- 可以在js中创建a标签,进行下载。(适用于异步获取文件url时使用)
// 创建a标签
let a = document.createElement('a')
// 定义下载名称
a.download = '文件名称'
// 隐藏标签
a.style.display = 'none'
// 设置文件路径
a.href = 'https://.../158ac1e6917445a4aa384a2a7209445a.xlsx'
// 将创建的标签插入dom
document.body.appendChild(a)
// 点击标签,执行下载
a.click()
// 将标签从dom移除
document.body.removeChild(a)
- 可以直接使用window.open(‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’),也可以实现a标签的功能
- window.location.href=‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’
或location.href=‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’,
他们是一样的表达,实现效果跟a标签一样。
二、通过后端返回blob(文本流)进行下载
- URL.createObjectURL()
handleDownload(file) {
service.get(`/download?fileId${file.id}`,{responseType: 'blob'}).then((blobContent)=>{
let a = document.createElement('a')
a.download = file.fileName
a.style.display = 'none'
let url = URL.createObjectURL(blobContent)
a.href = url
document.body.appendChild(a)
a.click()
URL.revokeObjectURL(url) // 销毁
document.body.removeChild(a)
}
},
- FileReader.readAsDataURL()
handleDownload(file) {
service.get(`/download?fileId${file.id}`,{responseType: 'blob'}).then((blobContent)=>{
// 创建FileReader实例
const reader = new FileReader()
// 传入被读取的blob对象
reader.readAsDataURL(blobContent)
// 读取完成的回调事件
reader.onload = (e) => {
let a = document.createElement('a')
a.download = file.fileName
a.style.display = 'none'
// 生成的base64编码
let url = reader.result
a.href = url
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
}
},