若依项目导出后端响应的Excel文件流处理

最新推荐文章于 2024-06-02 08:47:16 发布

Main12138

最新推荐文章于 2024-06-02 08:47:16 发布

阅读量602

点赞数

分类专栏：工具大前端文章标签： excel javascript vue.js

本文链接：https://blog.csdn.net/weixin_51311218/article/details/129278314

版权

工具同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

大前端

16 篇文章 0 订阅

订阅专栏

若依开源项目：http://doc.ruoyi.vip/ruoyi-vue

问题

在这里插入图片描述

前端

1. `download.js` 添加自定义方法

在这里插入图片描述

  /**
   * 自定义方法：导出后端响应的 excel 文件流
   * @param url 请求后端的接口地址 例如："/downloadExcel"
   * @param name 响应后的文件名称（无需加后缀 xlsx） 例如：”text“
   */
  exportStreamExcel(url, name){
    axios({
      url: baseURL + url,
      method: 'get',
      // 告诉服务器我们需要的响应格式
      responseType: 'blob',
      headers: { 'Authorization': 'Bearer ' + getToken() }
    }).then(res => {
      let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      let excelName = name + '.xlsx'
      link.setAttribute('download', excelName)
      document.body.appendChild(link)
      link.click()
      link.remove()
    }).catch((e) => {
      console.log(e)
    })
  }

2. 页面方法调用

在这里插入图片描述

    //下载测试
    downloadExcel(){
      // 下载excel流
      this.$download.exportStreamExcel("/manage/patient/downloadExcel", new Date().getTime() + "test")
    },