一般来讲导出都是后端完成逻辑，给接口给到前端，前端调用接口简单处理导出就可以了，但是上次我们公司做内部使用的后台，认为数据量小，前端导出实时更快，于是也有了前端导出的方式，做个总结。

先过一下后端导出的做法以及需要注意的一些点：

//我是事先封装了一个请求的方法，然后是正常的请求，只是需要注意的是要加一个responseType: 'blob',因为后端返回的就是一个blob类型
export function getDetailExcel (params) {
  return request({
    url: '/detailExcel',
    method: 'get',
    responseType: 'blob',
    params
  })
}

getDetailExcel(this.detailExcelQueryData).then(data => {
  const url = window.URL.createObjectURL(new Blob([data]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute(
    'download',
    `用户数据.xls`
  )
  document.body.appendChild(link)
  link.click()
})

前端导出的话我是通过调用查询接口，拼接数据然后导出：

// 导出数据
    exportDataFe () {
      // const tipText = this.textFormat()
      this.$confirm(`确定导出数据吗？`, '提示', {
        confirmButt·onText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      }).then(() => {
        this.requestTimes = 0
        this.excelCount = 1
        this.exportList = []
        this.exporting = true
        const query = Object.assign({}, this.exportReuqireData)
        query.pageIndex = 0
        query.pageSize = this.requestSize
        getWxusers(query)
          .then((res) => {
            if (res.total <= this.requestSize) {
              this.exportList = this.formatJson(res.users)
              this.exportExcel()
            } else {
              let total = res.total
              if (res.total > this.maxSize) {
                total = this.maxSize
                this.$message({
                  message: '单次最多可下载10万条数据',
                  duration: 5000,
                  type: 'warning'
                })
              }

              // 先判断有多少个文件
              this.excelCount = Math.ceil(total / this.excelSize)
              if (this.excelCount > 1) {
                this.requestTimes = Math.ceil(
                  (total - (this.excelCount - 1) * this.excelSize) /
                    this.requestSize
                )
                for (let k = 0; k < this.excelCount - 1; k++) {
                  this.combinedData(10, k)
                }
                this.combinedData(this.requestTimes, this.excelCount - 1)
              } else {
                this.requestTimes = Math.ceil(total / this.requestSize)
                this.combinedData(this.requestTimes)
              }
            }
          })
          .catch(() => {
            this.exporting = false
          })
      })
    },

    combinedData (requestTimes, fileOrder) {
      const alOrder = fileOrder || 0
      let allRequest = []
      for (var i = 0; i < requestTimes; i++) {
        const query = Object.assign({}, this.exportReuqireData)
        query.pageSize = this.requestSize
        query.pageIndex = i * query.pageSize + alOrder * this.excelSize
        allRequest.push([i, query])
      }
      allRequest = allRequest.map((item, index) => {
        return getWxusers(item[1])
      })
      Promise.all(allRequest).then((values) => {
        values.forEach((item) => {
          const list = this.formatJson(item.users)
          this.exportList = this.exportList.concat(list)
        })
        let order
        if (fileOrder === undefined) {
          order = 0
        } else {
          order = ++fileOrder
        }
        this.exportExcel(order)
        this.excelCount = this.excelCount - 1
      })
    },

    // 下载表格
    exportExcel (fileOrder) {
      import('@/vendor/Export2Excel').then((excel) => {
        // const fileText = this.textFormat()
        const tHeader = [
          'Id',
          '手机号',
          '学生姓名',
          '学校名称',
          '学校id',
          '会员等级',
          '会员激活时间',
          '会员到期时间',
          '省份',
          '高中所在学校'
        ]
        const data = this.exportList
        // const fileName = `AI升学宝用户${fileText}数据` + (fileOrder ? '(' + fileOrder + ')' : '')
        const fileName =
          `AI升学宝用户数据` + (fileOrder ? '(' + fileOrder + ')' : '')
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: fileName,
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
        this.exportList = []
        this.exporting = false
        this.$message({
          message: '用户数据已导出',
          duration: 5000,
          type: 'success'
        })
      })
    },