在VUE项目使用ajax下载excel表的做法
以往我们都是使用一个标签直接打开URL地址进行下载,但是在某个VUE项目中我遇到后端PHP要求使用GET请求进行下载的excel表,由于是第一次遇到这样的需求,有点不知所措。所以就立马百度一下,哈哈,网上还有不少大神遇到过这样的需求,还真被我找到了。但是每个项目都有自己不同的需求,我们可以参考别人的然后进行相应修改,以下是我在项目中写法://这个是请求接口数据export const e...
·
以往我们都是使用一个标签直接打开URL地址进行下载,但是在某个VUE项目中我遇到后端PHP要求使用GET请求进行下载的excel表,由于是第一次遇到这样的需求,有点不知所措。所以就立马百度一下,哈哈,网上还有不少大神遇到过这样的需求,还真被我找到了。但是每个项目都有自己不同的需求,我们可以参考别人的然后进行相应修改,以下是我在项目中写法:
//这个是请求接口数据
export const exportPlayerDetails =()=> axios({
method:'get',
url:'xxxx?is_export = 1',
responseType:'blob'
})
export const exportPlayerDetails =()=> axios({
method:'get',
url:'xxxx?is_export = 1',
responseType:'blob'
})
//模拟一个标签点击下载
downloads(data){
if(!data){
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display ='none'
link.href = url
link.setAttribute('download','excel.xls')
document.body.appendChild(link)
link.click()
},
//导出数据 - 调用接口函数
async isExports(){
var res = await exportPlayerDetails();
this.downloads(res);
}
downloads(data){
if(!data){
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display ='none'
link.href = url
link.setAttribute('download','excel.xls')
document.body.appendChild(link)
link.click()
},
//导出数据 - 调用接口函数
async isExports(){
var res = await exportPlayerDetails();
this.downloads(res);
}
需要注意的是excel表格的文件格式最好是以.xls结尾,如果以.xlsx结尾有些office软件版本无法打开。以上就是我在项目中使用ajax get请求下载excel的做法,欢迎大家指点纠正。
更多推荐
已为社区贡献16条内容
所有评论(0)