Element ui表格导出Excel 以及遇到的坑

项目中遇到需要导出excel的需求
首先安装依赖

首先安装依赖项：
npm install -S file-saver xlsx
或者是以下命令，这两个命令一样。
npm install --save xlsx file-saver

file-saver：保存文件
xlsx：电子表格解析器

接下来我们开始写一个表格，给表格一个id（项目中用到id并没有多大用，不知道是哪里的问题 总之先带着还是没毛病的）

<el-table :data="meterList" style="width: 100%" border id="listname">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column label="仪表编号" prop="prop仪表编号"></el-table-column>
        <el-table-column label="瞬时热量" prop="prop瞬时热量"></el-table-column>
</el-table>

引入依赖

// 在script中引入
import fileSaver from 'file-saver'
import xlsx from 'xlsx'

然后在methods中写如下方法，注意替换id

//下载表格
exportExcel(){
/* 从表生成工作簿对象 */
    var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换，保证时间格式或者较长数字不会出现科学计数法。（这个很关键）
	var wb = XLSX.utils.table_to_book(document.querySelector("#listname"),xlsxParam);
	/* 获取二进制字符串作为输出 */
	var wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
        type: "array"
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "导出文件名称.xlsx"
          );
        } catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
	}
	return wbout;
},

以上则是导出excel的关键代码
但这样 做出来的导出的excel是无法进行求和运算等等操作的

如果把{raw:true}改成false.导出的结果 可能就变成了科学计数法。也就是类似于乱码。如下图

转换成excel的时候使用原始的格式

如果发现导出的excel实际上是无法进行求和等运算之类的。有两种方法可以暂时性的解决想要求和等运算
因这种导出的excel与原本excel的储存方式不同。存贮方式不是以数字型进行保存的，导出为EXCEL后，很多无法直接求和
因此需要将导出的excel数值转化成数字。

以下是excel层面的知识…

我们在单元格输入公式sum(–A2:A7)，而后确定，我们发现数字出来了，但是只有第一行的数据，因为我们–将A2的数据，进行了转换

方法二
主要原因为系统导出的是文本型的数字，我们需要将其转换为数字，首先我们选中数据区域。右侧会出来了一个感叹号，我们点击，出现选项，找到其中的一项将数据类型转换为数值

转换后我们发现所有的数值，都是靠右侧排列的

但是代码层次如何解决 导出excel的东西无法进行求和，还没有找到是否有相关的配置项，如果有的话，会有后续的更新