Element ui表格导出Excel的全部数据

之前导出Excel表格只能将当前页导出到Excel，如果表格有分页则十分不方便。这是一个相对简单地实现方法。

一、第一步先安装3个依赖包

 npm install -S file-saver
 npm install -S xlsx
 npm install -D script-loader

二、在项目中新建一个excel文件夹，然后放入Export2Excel.js文件。

这个文件我会附在最后。（写完发现CSDN不能添加附件·······）
网盘链接：https://pan.baidu.com/s/1MzQ7aKWI02UT7oEMS0AKGQ
提取码：hkij
如果被吞了可以从我的CSDN资源下载。
我在网上查询资料的时候发现有些文章中要求加入Blob.js和Export2Excel.js两个文件。我用的这个方法只需要一个即可，但是内容与其中的Export2Excel并不完全相同。函数的使用方法也有些差异，还能够设置表格宽度自适应。
注：新版的需要把文件开头的

import XLSX from 'xlsx'变成import * as XLSX from 'xlsx' 否则会报错TypeError: Cannot read properties of undefined (reading ‘utils‘)（2022-07-27）

三、给导出表格按钮绑定点击事件

<el-button @click="exportExcel" >下载表格</el-button>

注意：文件路径，表头名称，字段名称，表格名称，宽度自适应

//下载全部表格
exportExcel() {
	import('@/assets/excel/Export2Excel').then(excel => {
    const tHeader = ["姓名", "年龄", "..."]; // 导出的excel表头名信息
    const filterVal = ["name", "age", "..."]; // 导出的excel表头字段名，需要导出表格字段名
    const list = this.dataList;
    const data = this.formatJson(filterVal, list)
    const autoWidth=true;
    excel.export_json_to_excel({
    	header: tHeader,     //表头
    	data,                //数据
    	filename:"实时数据", //名称
    	autoWidth: true,    //宽度自适应
    	})
    })
},
//格式转换,不需要改动
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
},

到此，点击按钮就能导出dataList表格的原始数据内容。

四、数据处理

从上述过程中看出我们可以选择不同列分别导出表格。但是此时导出的表格是原始数据，如果用到了element ui中的 formatter 属性来格式化内容，那么格式化后的内容则无法被导出。所以我舍弃了自带的 formatter 属性，自己将原始数据进行修改。

当我们接收到原始数据时储存在了dataList中，此时我们定义一个方法利用map()对数组内容进行格式化。

processingTableData(){
    this.dataList.map(item=>{
        item.time=item.time+"年"+·····//处理方法略
        return item
	})
},