blob下载
请求响应类型设置为blob,动态创建<a> 元素来触发下载操作。
downloadFile() {
axios({
url: '/api/download', // 替换为你的接口地址
method: 'GET',
responseType: 'blob' // 重要:将响应类型设置为 blob
}).then(response => {
const blob = new Blob([response.data])
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob)
let fileName = ''
try {
fileName = decodeURIComponent(res.headers['contentdisposition'].split('filename=')[1])
} catch (error) {
console.log('解析文件名称错误')
fileName = 'undefined.xlsx'
}
link.download = fileName
link.click()
});
}
url下载
将实际的文件 url 作为参数传递给downloadFile()方法,使用 Fetch API 发起 GET 请求,并使用 Blob 对象来处理文件数据,即可完成文件下载。
downloadFile(url) {
const fileName = url.slice(url.lastIndexOf('/') + 1)
fetch(url)
.then((res) => res.blob())
.then((blob) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
// 下载文件的名称及文件类型后缀
link.download = fileName
document.body.appendChild(link)
link.click()
// 在资源下载完成后 清除 占用的缓存资源
window.URL.revokeObjectURL(link.href)
document.body.removeChild(link)
})
}