项目中遇到需要导出excel的需求 首先安装依赖
首先安装依赖项: npm install -S file-saver xlsx 或者是以下命令,这两个命令一样。 npm install --save xlsx file-saverfile-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的东西无法进行求和,还没有找到是否有相关的配置项,如果有的话,会有后续的更新
