欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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'  //二进制流
  })
}
  1. 创建 <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对象
 })
相关标签: axios 实现下载