Element-ui 组件Table导出Excel

先看看页面叭~

导出的表~

好咯就是这样 上代码！！！

1.安装依赖

npm install --save xlsx file-saver

2.引入导出Excel依赖 

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

3.给Table加id类名

4.页面导出事件

// 定义导出Excel表格事件
exportExcel () {
  /* 从表生成工作簿对象 */
  var wb = XLSX.utils.table_to_book(document.querySelector(' #integration-table '))
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    // Blob 对象表示一个不可变、原始数据的类文件对象。
    // Blob 表示的不一定是JavaScript原生格式的数据。
    // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
    // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      // 设置导出文件名称
      'integration.xlsx')
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  } return wbout
},

5.点击调用导出呀~~~~

嘻嘻第一次做不需要后台提供接口的导出功能虽然简单但是很开心呀~