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, "优惠券发放记录统计");
    },

解决此方法很多网上的差不多都可以。一下提供简单的方法

 loads(){
		  let data={
			  userWord:this.dataList.userWord,
			  examId:this.$route.query.id,
			  exportType:this.active,
		  }
		api.exportUserResult(data).then((res) => {
					const blob = new Blob([res.data]); 
                    const fileName = '考试成绩.xls';
                    const linkNode = document.createElement('a');
                    linkNode.download = fileName; //a标签的download属性规定下载文件的名称
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
                    document.body.appendChild(linkNode);
                    linkNode.click();  //模拟在按钮上的一次鼠标单击
                    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
                    document.body.removeChild(linkNode);
      });
	  },

注意填写

另住拦截器，因为判断result，没在正确里返回，所以我直接返回

需要携带参数获取数据再导出Excel
写法一：

 // 导出
    handleExport (itemId) {
      window.location.href = `${AddressUrl}/itemDetail?itemId=${itemId}`
    },

process.env.VUE_APP_BASE_API=AddressUrl，为基准路径。
写法二：

   // 导出模板
    hanldeExport () {
     //api完整地址
      const url = `${process.env.VUE_APP_BASE_API}/itemList`
      //拼接url参数
      const param = '?brand=' + this.activeBrand + '&pageNum=' + this.pageNum + '&pageSize=' + 20 + '&size=' + this.activeSize + '&sortByPrice=' + this.sortByPrice + '&sortBySell=' + this.sortBySell + '&spec=' + this.spec
      // 创建一个a标签元素
      const a = document.createElement('a')
      // 给a标签设置链接属性
      a.href = url + param
      // 调用点击事件
      a.click()
    },

不需要加参数就直接调用后台接口就好

 window.location.href = `${process.env.VUE_APP_BASE_API}/itemList`