Vue.js + axios 实现excel下载
在以前实现的excel中,都是用<a href="xxx">DOWNLOAD</a>来实现的。但是由于项目中采用了token验证,上述的做法就不再可行了。在网上找了很多资料,最后给出一种可行的方案。1.后端返回相应的请求头Content-Type: application/o
·
在以前实现的下载excel功能中,都是用
<a href="xxx">DOWNLOAD</a>
来实现的。
但是由于项目中采用了token验证,上述的做法就不再可行了。
在网上找了很多资料,最后给出一种可行的方案。
1.后端返回相应的请求头
Content-Type: application/octet-stream(下载用的流)
2.axios设置
export function exportRate() {
return request({
url: '/com/rate/excel/out',
method: 'get',
responseType: 'blob' //二进制流
})
}
- 创建
<a>
元素下载
exportRate().then(res => {
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = 'rate.xlsx'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
})
更多推荐
已为社区贡献1条内容
所有评论(0)