Vue下载后端二进制exc/xlsx表单方法

最近在后台的项目中有个下载xlsx的需求，网上找了一些资料终于把功能实现了。

 

注意点：

1、由于在项目中axios都是会封装成方法。会把headers请求放在里面。

2、所以下载xlsx的请求的时候要单独写；

3、请求的时候必须带 responseType: 'blob',   // 用于后端返回的二进制文件流处理

 

实战代码：

axios({
    method: 'post',
    headers: {
      'content-type': 'application/json; charset=utf-8',
      'clientType': 'pc',
      'TOKEN': localStorage.getItem('token'),
    },
    responseType: 'blob',
    url: '/HK_FileAPI/property/propertyAccountPeriod/downLoadExclOut',
    data: { id: this.communityId }
  }).then((res) => {
    const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
    const url = window.URL.createObjectURL(blob)
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', new Date().getTime() + '.xlsx')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
  }).catch((err) => {
})