后台返回乱文文件流前端下载excel表格并从响应头取出文件名

最新推荐文章于 2023-07-14 16:31:51 发布

淋雪小新

最新推荐文章于 2023-07-14 16:31:51 发布

阅读量908

点赞数 1

分类专栏： vue 前端文章标签： vue.js

本文链接：https://blog.csdn.net/zxl_start/article/details/126623339

版权

前端同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

vue

57 篇文章 0 订阅

订阅专栏

后台返回乱文文件流前端下载excel表格并从响应头取出文件名

在这里插入图片描述

  exportData() {
      this.loading = true
      let param = {
        pageStart: 1,
        pageLen: 100000
      }
      let url = '/apis/event/exportEventInfoList?'
      axios({
        method: 'get',
        url: url + qs.stringify(param),
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json'
        }
        // getResponse: true
      })
        .then((res) => {
          if (res.status === 200) {
            const link = document.createElement('a')
            let blob = new Blob([res.data], { type: 'application/x-excel' })
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            // 从响应头获取文件名
            const filename = res.headers?.['content-disposition'].split('attachment;filename=')[1]
            link.download = decodeURI(filename)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.$notify({
              title: '成功',
              message: '导出成功',
              type: 'success',
              duration: 1000
            })
            this.loading = false
          } else {
            this.loading = false
            this.$message({
              type: 'error',
              message: '导出失败'
            })
          }
        })
        .catch(() => {
          this.loading = false
          this.$notify.error({
            title: '错误',
            message: '导出失败',
            duration: 1000
          })
        })
    }```