1.0.8 • Published 6 months ago
@liuyi_npm/excel v1.0.8
@liuyi_npm/excel
1.基础使用
首先安装 xlsx-js-style file-saver:
yarn add @liuyi_npm/excel2.使用case
const header = [
{
label: '统计表',
style: {
// 为第一行合并的表头设置样式
alignment: { horizontal: 'center', vertical: 'center' },
font: { bold: true, sz: 16, color: { rgb: 'FF0000' } }, // 字体加粗,大小16,红色
fill: { fgColor: { rgb: 'FFFF00' } } // 背景色黄色
},
children: [
{
label: '**',
prop: 'makeTime',
style: { alignment: { horizontal: 'left' } }
}, // 左对齐
{ label: '**', prop: 'voucherNo' },
{ label: '**', prop: 'settlementObjectValue' },
{ label: '**', prop: 'remark' },
{ label: '**', prop: 'shareName' },
{ label: '**', prop: 'bizType' },
{ label: '**', prop: 'subjectName' },
{
label: '**',
prop: 'borrowPrice',
style: { font: { color: { rgb: '008000' } } }
}, // 绿色字体
{
label: '**',
prop: 'creditPrice',
style: { font: { bold: true } }
} // 加粗
]
}
]
const data = this.dataList.map(item => ({
makeTime: item.makeTime,
voucherNo: `记-${item.voucherNo}`,
settlementObjectValue: item.settlementObjectValue,
remark: item.remark,
shareName: item.shareName,
bizType: this.filterBizTypesMap[item.bizType],
subjectName: item.subjectName,
borrowPrice: item.borrowPrice,
creditPrice: item.creditPrice
}))
exportExcel({
header, // 表头以及列渲染的定义
data, // 数据
filename: '数据记录' // 导出文件名
})3.配置项
| 参数名 | 含义 | 备注 |
|---|---|---|
options | 导出配置选项 | 具体可配置参数,见下表 |
options.header | 表头数组,包含列名和样式配置 | 具体可配置参数,见下表 |
options.data | 数据数组,包含要导出的数据 | 具体可配置参数,见下表 |
options.filename | 导出的 Excel 文件名 | 具体可配置参数,见下表 |
options.sheetName | 工作表名称,默认为 Sheet1 | 具体可配置参数,见下表 |
options.autoWidth | 是否自动调整列宽,默认为 true | 具体可配置参数,见下表 |
options.watermark | 水印文本,默认为空字符串 | 暂不支持,后续会支持文本、图片水印 |