vue + ant-design-vue导出Excel文件流

关于导出可以后端给个链接 前端直接 window.open(‘url’),也可以前端自己转blob 文件导出

//点击导出
      exportData(){
        this.isLoading = true
        if(!this.startTime || !this.endTime){
          this.$message.warning("请选择开始和结束时间")
        } else {
          console.log(this.startTime,this.endTime)
          httpUtil.axiosHttp({
            url: `xxx.com`,
            params: {
              startTime: this.startTime,
              endTime: this.endTime
            },
            method: "get",
            'responseType': 'blob'//设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
          }).then((res) => {
            console.log(res)
            if(res.data.code == 20001){
              this.$message.warning(res.data.message)
            } else  {
              let fileName = '文件名.xls'
              let tableData = res.data
              let blob = new Blob([tableData])//创建Blob对象,Blob(blobParts[, options])blobParts: 数组类型, 数组中的每一项连接起来构成Blob对象的数据
              let downloadElement = document.createElement('a')//创建dom
              let href = window.URL.createObjectURL(blob) //创建下载链接
              downloadElement.href = href
              downloadElement.download = fileName //下载后文件名
              document.body.appendChild(downloadElement)//添加创建的节点
              downloadElement.click() //点击下载
              document.body.removeChild(downloadElement) //下载完成移除元素
              window.URL.revokeObjectURL(href) //释放掉blob对象
              this.isLoading = false
            }
          }).catch((err) => {
            setTimeout(() => {
              this.isLoading = false
            }, 500);
          })
        }
      },

你可能感兴趣的:(vue + ant-design-vue导出Excel文件流)