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

阅读: 评论:0

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

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

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

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

一、第一步先安装3个依赖包
 npm install -S file-savernpm install -S xlsxnpm install -D script-loader
二、在项目中新建一个excel文件夹,然后放入Export2Excel.js文件。

这个文件我会附在最后。(写完发现CSDN不能添加附件·······)
网盘链接:
提取码: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=port_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})
},

本文发布于:2024-01-28 06:17:12,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17063938345402.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:表格   数据   Element   ui   Excel
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23