Vue.js + axios 实现excel下载
程序员文章站
2022-06-06 20:02:18
...
在以前实现的下载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对象
})
上一篇: vue 星星组件
推荐阅读
-
基于DevExpress的SpreadsheetControl实现对Excel的打开、预览、保存、另存为、打印(附源码下载)
-
vue+axios实现文件下载及vue中使用axios的实例
-
JSP实现从数据库导出数据到Excel下载的方法
-
PHP实现实时生成并下载超大数据量的EXCEL文件详解
-
Vue.js实现表格动态增加删除的方法(附源码下载)
-
nodejs+exceljs模块实现页面下载excel文件(代码教程)
-
JS实现导出Excel的五种方法详解【附源码下载】
-
JSP从数据库导出数据到Excel下载的实现
-
利用axios的post方式实现文件的下载
-
AngularJS基于http请求实现下载php生成的excel文件功能示例