Vue 前端导出后端返回的excel文件

<Card class="mt20" title="设备数据">
          <div slot="extra">
            <a class="ml10" href="#" @click.prevent="toExcel">
              <Icon type="md-download" />
              导出设备表
            </a>
          </div>
 </Card>
    // 导出excel表
    toExcel () {
      const data = {
          leftTime: this.leftTime,
          pageIndex: 1,
          pageSize: 10,
          rightTime: this.rightTime,
          type: 2
        }

      toExcel(data).then(res => {
        if (!res.data) {
          return
        }
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob)
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        // let fileName = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
        aLink.setAttribute('download', '用户活跃记录表.xlsx')
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
      }, err => {
        // 接口错误
        console.log(err)
      }).catch((err) => {
        // 处理逻辑出错
        console.log(err)
      })
    },

仔细看axios请求加了个responseType: ‘blob’ 配置

export const toExcel = data => {
  return axios.request({
    url: 'xxxxx',
    data,
    method: 'post',
    responseType: 'blob'
  })
}
上一篇:报表开发之批量导入导出excel


下一篇:Excel 2016新增函数之TEXTJOIN