operation-excel
v0.0.5
Published
a frontend tool library that exports excel and customizes table styles
Readme
1.导出excel
该工具库有前端excel导出的方法,调用exportCustomExcel方法,就传data和fileName参数就能实现只有前端导出excel,并且可以给表格的单元格设置样式。
示例:
import { exportCustomExcel } from "operation-excel";
let data = [
{
sheetName: "sheet1",
tableHeader: [
{
header: '姓名',
key: 'name',
width: 14
},
{
header: '年龄',
key: 'age',
width: 14
},
{
header: '联系方式',
key: 'contact',
width: 14
}
],
tableData: [
{
name: "zhangsan",
age: 20,
contact: "11111"
},
{
name: "lisi",
age: 23,
contact: "11111"
},
],
mergeCells: ['A2:A3'],
tableHeaderStyle: {
font: {
size: 16,
bold: true,
name: '仿宋'
},
alignment: {
vertical: 'middle', // 垂直居中
horizontal: 'center', // 水平居中
wrapText: true // 自动换行
},
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: {
argb: 'A9D08E' // 设置背景色
}
}
},
tableDataStyle: {
font: {
size: 16,
bold: true,
name: '仿宋'
},
alignment: {
vertical: 'middle', // 垂直居中
horizontal: 'center', // 水平居中
wrapText: true // 自动换行
},
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: {
argb: 'A9D08E' // 设置背景色
}
}
},
tableHeaderHeight: 23,
tableDataHeight: 20,
customCellStyle: true,
setCellStyle: function (rowIndex, colIndex, row, cell){
if (rowIndex === 1) {
cell.font = { size: 11, bold: true };
cell.alignment = {
vertical: 'middle', // 垂直居中
horizontal: 'center', // 水平居中
wrapText: true // 自动换行
};
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {
argb: 'e8f4ff' // 设置背景色
}
}
}
},
border: true,
borderStyle: 'thin',
borderColor: '3f87c5'
}
];
exportCustomExcel(data, "用户信息表.xlsx");函数参数说明
| 参数 | 说明 | 类型 |默认值| |----------|---------------|--------|---| | data | excel表格的配置和数据 | Array |-| | fileName | 文件名 | String |-|
data参数说明
| 参数 | 说明 | 类型 |默认值| |-------------------|------------------------------------------------------|-------|---| | sheetName | 工作表名称 | String |-| | tableHeader | 表头的配置 | Array |-| | tableData | 表格的数据 | Array |-| | mergeCells | 合并单元格的配置 | Array |-| | tableHeaderStyle | 表头样式的配置,该属性的每一项也可以不设置 | Object |-| | tableDataStyle | 表格样式的配置,该属性的每一项也可以不设置 | Object |-| | tableHeaderHeight | 表头的高度,如果不设置高度随着文字内容变化 | Number |-| | tableDataHeight | 表格中每一行的高度,如果不设置高度随着文字内容变化 | Number |-| | customCellStyle | 是否开启指定单元格的自定义样式,开启后tableHeaderStyle和tableDataStyle失效 | Boolean |-| | setCellStyle | 回调函数,单独设置指定单元格的样式,通过rowIndex和colIndex指定是哪一个单元格 | Function |-| | border | 是否设置边框 | Boolean |-| | borderStyle | 边框的样式,如果不设置就没有显示边框 | String |-| | borderColor | 边框的颜色 | String |-|
