vue项目element-ui表格导出Excel

一、安装依赖

cnpm i file-saver xlsx -S

二、引入依赖

在需要导出Excel的页面（如user.vue）引入file-saver和xlsx：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

三、提供用于导出的表格

除了用于展示的表格以外，还要准备一个用于下载的表格（非必须，但是推荐，后面注意事项中会提到这样做的理由）该表格一般不可见，即display: none;，并且为其设置一个id，如id="export-table1"，作用是告诉程序将来要导出哪个表格的数据，对应下文exportExcel方法中的document.querySelector('#export-table1')。

...


导出Excel



  
  
  

四、定义导出方法

exportExcel () {
  // 导出的内容只做解析，不进行格式转换
  let xlsxParam = { raw: true }
  let wb = null
  let tableName = ''
  let randomString = this.randomString(6)
  wb = XLSX.utils.table_to_book(
    document.querySelector('#export-table1'),
    xlsxParam
  )
  // 这里的randomString非必须，只是生成一串随机码
  // 便于下载多个文件而不重名
  tableName = `用户表-${randomString}.xlsx`

  /* get binary string as output */
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    // eslint-disable-next-line no-undef
    FileSaver.saveAs(new Blob([wbout], {
      type: 'application/octet-stream'
    }), tableName)
  } catch (e) {
    if (typeof console !== 'undefined') {
      console.log(e, wbout)
    }
  }
  this.$message.success('导出成功')
  return wbout
}

代码中的tableName变量就是将来下载的Excel的文件名，为了防止多次下载而重名，所以后面加了一段随机码，下面附上生成随机码的方法：

// 生成len位随机码
randomString (len) {
  len = len || 32
  // 屏蔽了容易让人混淆的字符，比如数字1和字母l,，数字0和字母o……
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = chars.length
  var str = ''
  for (let i = 0; i < len; i++) {
    str += chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return str
}

五、注意事项

1. 用于导出的表格有多少条数据，导出的Excel就有多少条。如果希望导出所有数据，那么该表格就不能设置分页（假设设置每页20条，导出的Excel也只有20条），所以建议额外准备一个隐藏表格专门用于导出Excel；
2. 点击导出按钮执行exportExcel方法，如果发现导出的Excel数据不全或者只有表头，可能是因为点击过快造成数据还未渲染完成，可以在点击事件中设置一定时间的延迟（比如1000毫秒），以确保数据成功渲染；
3. 隐藏表格应保持尽可能的简洁，删掉所有的fixed（设置了列冻结的表格导出后可能会生成多份）、不必要的样式、排序、分组等属性，只确保基本数据能渲染成功即可。