一、安装依赖

$ npm i file-saver xlsx -S
# 国内的用户可以使用cnpm

二、引入依赖

在需要导出Excel的页面(如user.vue)引入file-saverxlsx

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

三、提供用于导出的表格

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

<!--用于展示的表格,用户想下载的表格-->
<el-table>...</el-table>

<!--导出按钮-->
<el-button @click="exportExcel">导出Excel</el-button>

<!--用于导出Excel的隐藏表格,用户实际导出的表格-->
<el-table
  id="export-table1"
  :data="user"
  style="display: none;">
  <el-table-column property="name" label="姓名"></el-table-column>
  <el-table-column property="gender" label="性别"></el-table-column>
  <el-table-column property="age" label="年龄"></el-table-column>
</el-table>

四、定义导出方法

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(设置了列冻结的表格导出后可能会生成多份)、不必要的样式、排序、分组等属性,只确保基本数据能渲染成功即可。
1+
分类: vue
浏览:1,470

4 条评论

fleck 5600sxt 40000 grain · 2020年4月7日 下午11:58

Wonderful, what a blog it is! This webpage gives helpful information to us,
keep it up.

0

sloth hiking team t shirt · 2020年4月20日 下午2:01

I enjoy what you guys are usually up too. Such clever work and coverage!
Keep up the amazing works guys I’ve incorporated you guys to our blogroll.

0

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up