本人前端小白,因项目需要自学vue以及elementUI,遇到实现将表格中指定行的数据导出为excel文件中的需求,特此记录实现过程和心得,便于日后方便查阅。
安装依赖
npm install --save xlsx file-saver
npm install -D script-loader
在src文件夹中新建文件夹(命名为excel)
新建文件夹后,在excel文件夹内新建两个js文件,分别命名为Blob.js、export2Excel.js,然后复制链接的代码分别到相关文件里。链接: https://pan.baidu.com/s/18BF4OF-wVzyw1IR_O7kUdw 提取码: 2v7d。
具体效果如图
在相关文件内的method方法中,写入如下代码
注:默认你的Table是如下形式
<Table :data="tableData" @selection-change="handleSelectionChange" id="networkTable">
所以相应的method方法中写一个方法监控选择的行的情况
handleSelectionChange (val) { // 操作多选
this.multipleSelection = val; // 多选的行会存入multipleSelection数组中
}
method方法中写入如下方法:
// 列表下载
downloadExcel () {
this.$confirm('确定下载列表文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.excelData = this.multipleSelection; // multipleSelection是一个数组,存储表格中选择的行的数据。
this.export2Excel();
}).catch(() => {
});
},
// 数据写入excel
export2Excel () {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('@/excel/export2Excel'); // 这里必须使用绝对路径,使用@/+存放export2Excel的路径
const tHeader = ['表头名称1', '表头名称2', '表头名称3']; // 导出的表头名信息
const filterVal = ['表头字段名1', '表头字段名2', '表头字段名3']; // 导出的表头字段名,需要导出表格字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, 'excel表格名字');// 导出的表格名称,根据需要自己命名
});
},
// 格式转换,直接复制即可
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
加入button
<Button type="primary" @click="downloadExcel">导出</Button>
嗯。正常的话,应该成功了,最起码我成功了。。。
遇到的问题
- 网上其他教程有一部分是这种 https://www.jianshu.com/p/6edf74f65fc1 。这种方法简单易行,不用添加额外的文件,装上依赖,写入代码就能用。不过存在缺陷,使其不能应用于实际开发场景中:不能指定列。这样会导致下载的excel的把页面全部的列都下载下来,包括复选框和后面操作列中的删除、修改。如下图
- 对于添加的Blob.js和export2Excel.js两个文件的原理还没有搞懂。
- https://blog.csdn.net/sisi_chen/article/details/82754240 这篇文章的第三步,即“在build文件夹下找到webpack.base.conf.js做如下修改”,我并没有找到webpack.base.conf.js,所以有点懵逼,又看了https://www.cnblogs.com/tnnyang/p/10339214.html 这篇文献,发现他似乎没有修改这步,所以我也跳过了,最后也能行。所以这里的原理我也没搞懂。。。
参考文献
https://blog.csdn.net/sisi_chen/article/details/82754240
https://www.jianshu.com/p/6edf74f65fc1
https://www.cnblogs.com/tnnyang/p/10339214.html
https://blog.csdn.net/oStormyNight/article/details/81359631