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);
          })
        }
      },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容