需求
我是用的是element ui table,之前我做了导出,但是是导出列表的全部数据,但是新增的功能是可以复选框选中导出
结果:会导出我选中的这几条数据
安装依赖
npm install --save xlsx file-saver
npm install -D script-loader
在src文件夹中新建文件夹(命名为excel)
下载链接文件,放在excel中链接: https://pan.baidu.com/s/1Ax9M5SdA-RAr9q56liZUyQ 提取码: r62z
如下图所示:
正确设置路径
打开Export2Excel.js文件,设置里面的路径,正确引入Blob.js
页面代码
<Table :data="tableData" @selection-change="handleSelectionChange">
<Button type="primary" @click="downloadExcel">导出</Button> //导出按钮
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'); // 这里必须使用绝对路径
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]));
}
以上是参考别人的,由于很多地方会使用,我把导出的方法写在了公共的文件里面
// 公共文件是common
export default {
// 列表选中下载 excelData导出的数据,tHeader字段名称,filterVal字段
downloadExcel(excelData,tHeader,filterVal) {
require.ensure([], () => {
let { export_json_to_excel } = require("@/excel/export2Excel");
let data = excelData.map(v => filterVal.map(j => v[j]));
// 这是表格的名称。合同列表+当前日期,dateFormatStr是一个方法,格式化了日期
let excelName='合同列表'+this.dateFormatStr(new Date)
export_json_to_excel(tHeader, data, excelName); // 导出的表格名称,根据需要自己命名
});
}
}
在main.js中引入文件夹
import common from './common.js'
//注册到vue原型上
Vue.prototype.common = common
调用下载方法
downloadExcel{
if (this.mulSelectContract.length > 0) {
let fieldTitle = [
"学员编号",
"报名时间",
"学员姓名",
"报名课程",
"备注"
];
let fieldName = [
"StudentID",
"AddTime",
"name",
"CourseLabel",
"Comments"
];
this.common.downloadExcel(
this.mulSelectContract,
fieldTitle,
fieldName
);
}
}