推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]

1、插件地址

将前端 table 导出 excel , 基于 exceljs + file-saver , 适用于所有表格基于数据源的定制化导出
具大佬所说，是公司给俩星期开发时间开发出来的导出插件，在我使用vxe-table插件自带的导出功能时，那个导出是分组表头的问题确实影响了我很久~所幸有这么款简单易上手的插件，解决了我大部分的问题，也节省了很多时间。大家有兴趣可以去git上瞅瞅，如果有帮到的可以点个⭐啥的，有啥优化意见可以在上面提，大佬有时间的话回复的也蛮快。

2.简单操作实现前端导出，在也不用担心在后台poi去封装大段代码了。

~~下面是从大佬git上搬过来的，有问题可以去看上面的git地址

1、导出正常表格到 Excel


**正常按表格格式书写 column 和 data, dataIndex 为对应数据源的字段
注意：column 中的 key 默认为 title，可通过 columnKey 设置，dataIndex 中的 key 默认为 dataIndex, 可通过 dataIndex 设置**# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({ column, data },{ progress: progress => console.log(progress) }// 进度条回调);instance.download("导出正常表格案例");
}# column
const column = [{ title: "日期", dataIndex: "date" }, // title为excel列名称,dataIndex为当前列对应的数据源字段{ title: "姓名", dataIndex: "name" },{ title: "地址", dataIndex: "address" },
];# data
const data = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},
]

2. 导出表头合并到 Excel


表头的合并，将对应的列设置成相应的树形结构
注意：树形结构默认的孩子字段为 children,可通过 childrenKey 设置,非末级节点传递的 dataIndex 会被过滤掉，无需外界额外处理# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({ column, data },{ progress: progress => console.log(progress) }// 进度条回调);instance.download("导出表头合并的表格案例");
}# column
const column = [{ title: "日期", dataIndex: "date" },{title: "配送信息",children: [{ title: "姓名", dataIndex: "name" },{title: "地址",children: [{ title: "省份", dataIndex: "province" },{ title: "市区", dataIndex: "city" },{ title: "地址", dataIndex: "address" },{ title: "邮编", dataIndex: "zip" },],},],},
];# data
const data = [{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-06",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-07",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},
]

3. 导出表体合并到 Excel

表体的合并，指定 spanMethod函数，该函数接收 4 个参数，返回值为对象格式,
可写参数为 rowspan、colspanrow：当前行数据
column：当前列数据
rowIndex：当前行索引
columnIndex：当前列索引# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({column,data,spanMethod: ({ row, column, rowIndex, columnIndex }) => {if (columnIndex === 0) {if (rowIndex % 2 === 0) {return {rowspan: 2,colspan: 1,};}}},},{progress: progress => console.log(progress),});instance.download("导出表体合并案例");
}# 我自己写的合并通用方法  start
data(){return {indexRow:0,indexText:'',indexflag:true}
}
spanMethod: ({ row, column, rowIndex, columnIndex }) => {if (column == 'fjname') {if (rowIndex === 0){//第一行进来设置默认值this.indexText = row.fjname}//判断上一行和本行值是否相同if (row.fjname != this.indexText){this.indexText = row.fjname;//初始化returnthis.indexflag = true//初始化需要跨行数this.indexRow = 0}for (let i = 0; i < data.length; i++){if (data[i].fjname == this.indexText){//合计需要跨行数this.indexRow += 1}}//遇到遇上一行不一样的开始跨行(因为跨行只有从第一行不一样的跨行才对)if (this.indexflag){this.indexflag = falsereturn {rowspan: this.indexRow,colspan: 1,};}}},
# 我自己写的合并通用方法  end# column
const column = [{ title: "ID", dataIndex: "id" },{ title: "姓名", dataIndex: "name" },{ title: "数值1（元）", dataIndex: "amount1" },{ title: "数值2（元）", dataIndex: "amount2" },{ title: "数值3（元）", dataIndex: "amount3" },
];# data
const data = [{id: "12987122",name: "王小虎1",amount1: "234",amount2: "3.2",amount3: 10,},{id: "12987123",name: "王小虎2",amount1: "165",amount2: "4.43",amount3: 12,},{id: "12987124",name: "王小虎3",amount1: "324",amount2: "1.9",amount3: 9,},{id: "12987125",name: "王小虎4",amount1: "621",amount2: "2.2",amount3: 17,},{id: "12987126",name: "王小虎5",amount1: "539",amount2: "4.1",amount3: 15,},
];

4. 导出混合合并到 Excel

混合合并，需要结合表头合并 + 表体合并即可# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({column,data,spanMethod: ({ rowIndex, columnIndex }) => {if (columnIndex === 0 && rowIndex === 0) {return {rowspan: 2,colspan: 2,};}if (rowIndex === 2 && columnIndex === 2) {return {rowspan: 1,colspan: 3,};}if (rowIndex === 0 && columnIndex === 4) {return {rowspan: 2,colspan: 1,};}if (rowIndex === 6 && columnIndex === 0) {return {rowspan: 1,colspan: 6,};}},},{progress: progress => console.log(progress)});instance.download("导出正常表格案例");
}# column
const column = [{ title: "姓名", dataIndex: "name" },{ title: "年龄", dataIndex: "age" },{title: "配送信息",children: [{title: "地址",children: [{ title: "省份", dataIndex: "province" },{ title: "市区", dataIndex: "city" },{ title: "地址", dataIndex: "address" },{ title: "邮编", dataIndex: "zip" },],},],},
];# data
const data = [{date: "2016-05-03",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-03",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-03",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-07",name: "王小虎",age: 20,province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},
]

5. 导出树形表格到 Excel

1、支持树形数据的导出,当数据中有 children 字段时会标记为树形的 Excel 如果不需要或配置为其他字段可以用 childrenKey 进行配置
2、可以通过 indentSize 以控制每一层的缩进宽度
3、必须添加 treeNode:true 字段
4、默认会取第一列的字段作为 树形结构展示，如果是其他列可以用 treeField 字段来指定列名
⭐注意：树形结构表体区域不支持合并、表头可以自定义合并# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({column,data,treeNode:true,treeField: "name",},{progress: progress => console.log(progress),indentSize: 1, // 默认是1,可自行调整});instance.download("导出树形表格案例");
}# column
const column = const column = [{ title: "ID", dataIndex: "id" },{ title: "日期", dataIndex: "date" },{ title: "姓名", dataIndex: "name" },{ title: "地址", dataIndex: "address" },
];# data
const data = [{id: "1",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",children: [{id: "1-1",date: "2016-05-02",name: "王小虎-1",address: "上海市普陀区金沙江路 1518 弄",},{id: "1-2",date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 1518 弄",children: [{id: "1-2-1",date: "2016-05-02",name: "王小虎-1",address: "上海市普陀区金沙江路 1518 弄",},{id: "1-2-2",date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 1518 弄",},{id: "1-2-3",date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 1518 弄",},],},],},{id: "2",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{id: "3",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",children: [{id: "3-1",date: "2016-05-02",name: "王小虎-1",address: "上海市普陀区金沙江路 1518 弄",},{id: "3-2",date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 1518 弄",},{id: "3-3",date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 1518 弄",},],},{id: "4",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},
];

6. 导出图片到 Excel

1、将 dataIndex 对应的数据源设置成数组结构即可2、另外对于图片的样式(目前只支持设置图片宽高)提供了 setImageStyle 函数 ,参数格式为对象,包含 data (数据源)、rowIndex (当前行索引)、columnIndex (当前列索引)、type (标识当前是表头还是表体)**
⭐注意：数组中每一项都为 图片 url 路径,错误路径会导致请求失败，保证图片路径和当前项目是同源，否则会导致跨域# code
// 点击导出触发的函数
handleExport() {const instance = new ElMapExportTable({column,data: this.tableData,setImageStyle: ({ data, rowIndex, columnIndex, type }) => {return {width: 100,height: 100,};},},{ progress: val => console.log(val) });instance.download("导出图片到Excel案例");
}# column
const column = [{ title: "日期", dataIndex: "date" },{ title: "姓名", dataIndex: "name" },{ title: "图片", dataIndex: "images" },{ title: "地址", dataIndex: "address" },];# data
const data = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",images: ["/assets/插入数据到Excel尾部.png","/assets/插入数据到Excel尾部.png","/assets/插入数据到Excel尾部.png",],},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},
]

7. 设置 Excel 的列样式

1、提供 setColumnStyle 函数, 该函数接收一个参数,参数格式为对象,包含 columnIndex (当前列索引)
2、返回值为对象,具体可写的所有样式参考[点击此处](https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%A0%B7%E5%BC%8F)# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setColumnStyle({ columnIndex }) {if (columnIndex === 2) {return { width: 40, style: { font: { bold: true } } };}},},{ progress: progress => console.log(progress) });instance.download("设置Excel的列样式");
}

8. 设置 Excel 的行样式

1、提供 setRowStyle 函数
2、该函数接收一个参数,参数格式为对象,包含 data (数据源)、rowIndex (当前行索引)、
columnIndex (当前列索引)、type (标识当前是表头还是表体)
3、返回值为对象,具体可写的所有样式参考[点击此处](https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E8%A1%8C)# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setRowStyle({ data, columnIndex, rowIndex, type }) {console.log({ data, columnIndex, rowIndex, type });if (type === "main") {return {height: 40,};}},},{ progress: progress => console.log(progress) });instance.download("设置Excel的行样式");
}

9. 设置 Execl 的单元格样式

1、提供 setCellStyle 函数
2、该函数接收一个参数,参数格式为对象,包含 data (数据源)、rowIndex (当前行索引)、
columnIndex (当前列索引)、type (标识当前是表头还是表体)
3、返回值为对象,具体可写的所有样式参考[点击此处](https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%A0%B7%E5%BC%8F)// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setCellStyle({ data, columnIndex, rowIndex, type }) {console.log({ data, columnIndex, rowIndex, type });if (type === "main" && columnIndex === 2) {return {font: {size: 16, // 字体大小bold: true, // 字体加粗italic: true, // 字体倾斜color: { argb: "FFFF0000" }, // 字体颜色},// fill: {//   type: "pattern",//   pattern: "solid",//   fgColor: { argb: "FF0000FF" }, // 填充背景颜色// },};}},},{ progress: progress => console.log(progress) });instance.download("设置Excel的单元格样式");
}

10. 自定义 Excel 单元格格式

1、提供 setCellFormat 函数
2、该函数接收一个参数,参数格式为对象,包含 data (数据源)、rowIndex (当前行索引)、
columnIndex (当前列索引)、type (标识当前是表头还是表体)
3、返回值为对象,具体可写的所有样式参考[点击此处](https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%95%B0%E5%AD%97%E6%A0%BC%E5%BC%8F)# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setCellFormat: ({ data, rowIndex, columnIndex, type }) => {if (type === "header" && rowIndex === 0 && columnIndex === 0) {return {text: "我是超链接",hyperlink: "http://www.chengxiaohui.com",tooltip: "小郑同学的开发路",};}if (rowIndex === 1 && columnIndex === 0) {return {numFmt: "yyyy-mm-dd",};}},},{ progress => console.log(progress) });instance.download("自定义Excel单元格格式");
}

11. 设置 Excel-Sheet 样式

1、提供 setSheetStyle 函数
2、该函数接收一个参数,参数格式为对象,包含 sheetIndex (当前 sheet 索引)
3、返回值为对象,具体可写的所有样式参考[点击此处](https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%B7%BB%E5%8A%A0%E5%B7%A5%E4%BD%9C%E8%A1%A8)# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,sheetName: "~~~ 我有名字了 ~~~", // sheet名称setSheetStyle: ({ sheetIndex }) => {console.log(sheetIndex, "sheetIndex");return {properties: { tabColor: { argb: "FFC0000" } }, // 创建带有红色标签颜色的工作表views: [{state: "frozen",xSplit: 1, // 固定1列(同表格固定列)ySplit: 1, // 固定1行(同表格固定行)},],};},},{ progress => console.log(progress) });instance.download("设置Excel-Sheet样式");
}

12. 临时插入 Excel 头部数据

1、提供 setInsertHeader 函数
2、该函数接收一个参数,参数格式为对象,包含 sheetIndex (当前 sheet 索引)
3、返回值为对象,对象中可以写 cells (单元格信息及样式)、columnStyle (列样式)、rowStyle (行样式)
⭐注意: 目前只支持插入数据到头部、尾部# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setInsertHeader: ({ sheetIndex }) => {console.log(sheetIndex);return {cells: [{row: 0,col: 0,rowspan: 2, // 占2行colspan: 3, // 占3列text: "我是插入到Excel头部的信息",},{row: 2,col: 0,rowspan: 3,colspan: 3,text: "我也是插入到Excel头部的信息",style: {font: {size: 16, // 字体大小bold: true, // 字体加粗italic: true, // 字体倾斜color: { argb: "FFFF0000" }, // 字体颜色},},},],};},},{ progress => console.log(progress) });instance.download("临时插入Excel头部数据");
}

13. 临时插入 Excel 尾部数据

1、和 setInsertHeader 同配置
2、提供 setInsertFooter 函数
3、该函数接收一个参数,参数格式为对象,包含 sheetIndex (当前 sheet 索引)
4、返回值为对象,对象中可以写 cells (单元格信息及样式)、columnStyle (列样式)、rowStyle (行样式)
⭐注意: 目前只支持插入数据到头部、尾部
⭐注意: 内部会自动推断现在的位置，我们只需要考虑从尾部开始的位置即可,位置是从**(0 row,0 col)开始**# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable({column,data,setInsertFooter: ({ sheetIndex }) => {console.log(sheetIndex);return {cells: [{row: 0,col: 0,rowspan: 2, // 占2行colspan: 3, // 占3列text: "我是插入到Excel尾部的信息",},{row: 2,col: 0,rowspan: 3,colspan: 3,text: "我也是插入到Excel尾部的信息",style: {font: {size: 16, // 字体大小bold: true, // 字体加粗italic: true, // 字体倾斜color: { argb: "FFFF0000" }, // 字体颜色},},},],};},},{ progress => console.log(progress) });instance.download("临时插入数据到Excel尾部");
}

14. 导出多个 Sheet 到 Excel

传递为一个数组即可，数组中每一项都为一个Sheet,Sheet 的所有配置同之前一样# code
// 点击导出触发的函数内
handleExport(){const instance = new ElMapExportTable([{ column: column1, data: data1, sheetName: "我是Sheet1" },{ column: column2, data: data2, sheetName: "我是Sheet2" },],{ progress: this.handlePercentage });instance.download("导出多个Sheet到Excel");
}
15. 导出大数据量表格到 Excel10W 条数据 耗时 4s 左右,不同电脑不同速度# code
const instance = new ElMapExportTable({ column, data },{ progress: val => console.log(val) }
);
instance.download("导出大数据量表格到Excel");

参数说明

column 属性

参数	说明	类型	默认值
title	对应的 Excel 列名,可通过 columnKey 设置	any	-
dataIndex	Excel 列对应的数据源字段,默认为 dataIndex,可通过 dataIndex 指定其他字段	string	dataIndex
dataIndex	支持通过数组查询嵌套路径([‘a’,‘b’,‘c’]) 或 a.b.c 查询嵌套路径	string ,string[]	‘’
children	Excel 表头分组嵌套列配置,可通过 childrenKey 设置	array	-

data 属性

其他属性

参数	说明	类型	默认值
progress	导出时触发的进度条方法	Function(val)	-
treeNode	标识导出后是否以树形结构展示	boolean	false
treeField	默认会取第一列的字段作为树形结构展示，如果是其他列可以用 treeField 字段来指定列名	string	第一列的字段
indentSize	控制树形结构的层级缩进	number	1
spanMethod	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })/Object	-
sheetName	Excel 中的 Sheet 名称	string	sheet + i + 1
columnKey	Excel 默认的列名配置名称	string	title
childrenKey	Excel 表头分组嵌套列/树形结构子节点名称	string	children
setColumnStyle	列的 style 方法	Function({columnIndex})/Object	-
setRowStyle	行的 style 方法	Function({data,rowIndex,columnIndex,type})/Object	-
setCellStyle	单元格的 style 方法	Function({data,rowIndex,columnIndex,type})/Object	-
setImageStyle	图片的 style 方法	Function({data,rowIndex,columnIndex,type})/Object	{width:100,height:100}
setCellFormat	单元格的格式方法	Function({data,rowIndex,columnIndex,type})/Object	-
setSheetStyle	Excel 中 Sheet 样式的方法	Function({sheetIndex})/Object	-
setInsertHeader	临时插入数据到 Excel 头部的方法	Function({sheetIndex})/Object	-
setInsertFooter	临时插入数据到 Excel 尾部的方法	Function({sheetIndex})/Object	-
tables	导出多个 table	array	[{table}]

推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]

1、插件地址

2.简单操作实现前端导出，在也不用担心在后台poi去封装大段代码了。

1、导出正常表格到 Excel

2. 导出表头合并到 Excel

3. 导出表体合并到 Excel

4. 导出混合合并到 Excel

5. 导出树形表格到 Excel

6. 导出图片到 Excel

7. 设置 Excel 的列样式

8. 设置 Excel 的行样式

9. 设置 Execl 的单元格样式

10. 自定义 Excel 单元格格式

11. 设置 Excel-Sheet 样式

12. 临时插入 Excel 头部数据

13. 临时插入 Excel 尾部数据

14. 导出多个 Sheet 到 Excel

参数说明

column 属性

data 属性

推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]相关推荐

最新文章

热门文章