地方
1.请求接口,response响应的数据为数据流格式
2. 页面,加导出按钮
<Button type="primary" onClick={handleExportExcel} > 导出 </Button>
3.写方法
方案一:
- api接口中请求
downlownExcel = (data: any, options = {}) =>
http.post(url, data, { responseType: 'blob', ...options })
//responseType: 'blob' 必须写
2. 方法实现
import {upload} from '@/api'
const handleExportExcel = async () => {
const res: any = await upload.downlownExcel()
const blob = new Blob([res as BlobPart])
const elink = document.createElement('a') //创建a标签节点
elink.download = `导出.xlsx` //下载出来的名字
elink.style.display = 'none'
elink.href = window.URL.createObjectURL(blob) //创建好的url 放入a 标签 href中
document.body.appendChild(elink) //追加到body中
elink.click() //执行a标签的点击
window.URL.revokeObjectURL(elink.href) //浏览器打开excel文件
}
方案二:
直接在请求接口中打开
exportOrder(data: any) {
http.post('url', data).then((res: any) => {
const aNode = document.createElement('a')
aNode.setAttribute('download', '')
aNode.setAttribute('href', '需要你get的excel表的地址' +
res.download_url) // href链接
aNode.click()
})
}
最后欢迎大家提出宝贵意见