vue-element-admin 导出excel

这个导出功能只能导出当前页的数据，想要全部导出，数组要是全部数据，具体代码如下

先在data数据源定义以下变量

downloadLoading: false,
filename: '测试',
autoWidth: true,
bookType: 'xlsx'

在methods定义两个方法，代码如下

// 这个函数名字绑定的是你上边的导出按钮
handleDownload() {
  this.downloadLoading = true
  // 这个文件是vue-element-admin里边自带的，跟着路径你就能找到，不用担心把报错
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['头像', '标题', 'Author', 'Readings', 'Date'] // 这个就是excel表格的头部名称
    const filterVal = ['actvr', 'title', 'author', 'pageviews', 'display_time'] // 这个就是从导出的数据在你数组里的名字
    const list = this.list // 这个就是你页面循环的那个数组,如果你想全部导出的话,数组就需要是全部数据
    const data = this.formatJson(filterVal, list)
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: this.filename, // 这个就是你导出的文件的名字
      autoWidth: this.autoWidth,
      bookType: this.bookType
    })
  this.downloadLoading = false
  })
},
formatJson(filterVal, jsonData) {
 return jsonData.map(v => filterVal.map(j => {
  if (j === 'timestamp') {
    return parseTime(v[j])
  } else {
    return v[j]
  }
 }))
}

这就可以导出了，这属于封装好的方法，没有走接口，

如果你们的导出需要走接口就可以导出全部数据的话，上边的所有东西可以不用，下面是走接口的代码。

// 导出excel
async handleDownload() {
   this.downloadLoading = true
   let parmas = {
     id: this.listQuery.id,
     realName: this.listQuery.realName,
     sort: this.sort,
   }
   // 这是我的网络请求,你们可以写你们自己的
   const res = await export_data({...parmas});

   // 如果网络请求成功之后没有弹出文件,则需要下面的代码,这些是重点
   const system = window.navigator.platform == "Win32" ? "window" : "mac"
   let blob = new Blob([res], {type: "application/vnd.ms-excel"});
   let url = window.URL.createObjectURL(blob);
   let link = document.createElement('a');
   link.download = `数据列表.${system == "mac" ? "xlw" : "xls"}` //下载的文件名
   link.href = url;
   link.click();
   this.downloadLoading = false
},

这些做完之后,打开表格,可能乱码,则需要在请求里加上这行代码 responseType: 'blob',

// 导出数据列表
export function export_data(query) {
  return request({
    url: 'url',
    method: 'get',
    params: query,
    responseType: 'blob',
  })
}

然后等打开文件，乱码就解决了