美文网首页vue
vue + ant-design-vue导出Excel文件流

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

作者: 江川哇 | 来源:发表于2021-12-24 16:59 被阅读0次

    关于导出可以后端给个链接 前端直接 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文件流

        本文链接:https://www.haomeiwen.com/subject/xaalqrtx.html