1、使用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);
          })
        }
      },

打印的数据:
在这里插入图片描述

导出到excel部分截图:
在这里插入图片描述


2、使用xlxs方式导出


使用xlxs首先要安装:npm install xlsx

我把导出封装在全局的js文件中的

在这里插入图片描述

使用

接收2个参数:需要导出的数据,导出的文件名

这种方式是把数据生成文件直接下载下来

	//点击导出触发
    onClickExportTable() {
      //先获取需要导出的数据
      let { releseDatas } = this.$data;
      let exportArr = [["序号", "操作者", "操作时间"]];
      for (let i = 0; i < releseDatas.length; i++) {
        exportArr.push([
          releseDatas[i].id,
          releseDatas[i].user,
          releseDatas[i].useTime,
        ]);
      }
      Util.exportExcle(exportArr, "优惠券发放记录统计");
    },
Logo

前往低代码交流专区

更多推荐