之前导出Excel表格只能将当前页导出到Excel,如果表格有分页则十分不方便。这是一个相对简单地实现方法。
npm install -S file-savernpm install -S xlsxnpm install -D script-loader
这个文件我会附在最后。(写完发现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小时内删除。
留言与评论(共有 0 条评论) |