vue element-ui导出el-table表格为Excel文件

1. 首先需要安装依赖

cnpm install --save xlsx file-saver

2. 为<el-table></el-table>表格添加id属性标识

<el-table
    id="educe-table"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :header-cell-style="{ background: '#f4f4f4' }"
    @selection-change="handleSelectionChange"
></el-table>

3. 添加一个导出按钮

<el-button class="btn-seal" @click="exportExcel">导出结果</el-button>

4. 引入导出Excel表格依赖

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

5. 接下来编写导出方法

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

值得注意的是前端导出表格如果表格带有分页的话就不能导出全部了，只能导出当前页， 这时就需要使用后台导出表格了。

亲测了下是可以实现的，如下图：

可以看到是可以实现的，但是对于纯字符串， 比如：手机号，身份证号会默认使用科学计数法表示，显然这不是我们想要的，那么该怎么办呢？

var wb = XLSX.utils.table_to_book(document.querySelector('#educe-table')， {raw:true});

在获取table的时候加上{raw:true}就可以将字符串转成纯数字了，效果如下图所示：