前言
对于数据导出，我们应该经常会遇到这个需求。大多数情况我们是依赖后端来实现，今天就给大家分享一个前端实现导出的实现，让我们前端工程师摆脱对后端的依赖，实现我们的大前端梦。
初始化项目，安装依赖
vue create demo
npm i --save exceljs
npm i --save file-saver
实现导出excel
样式设置
tips => exceljs开发文档：github.com/exceljs/exc…
<1>添加背景色（我们先给表头添加背景）
// 给表头添加背景色
let headerRow = worksheet.getRow(1);
//方式一：整行都会设置颜色
headerRow.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: 'dff8ff'},
}
//方式二：非空的设置颜色
// 通过 cell 设置背景色，更精准
headerRow.eachCell((cell, colNum) => { cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: 'dff8ff'},
}
})
<2>修改字体样式
// 设置字体
cell.font = {
bold: true,
italic: true,
size: 12,
name: '微软雅黑',
color: {argb: 'ff0000'}, };
row.font = {
bold: true,
italic: true,
size: 12,
name: '微软雅黑',
color: {argb: 'ff0000'},
};
| 字体属性 | 描述 | 示例值 |
|---|---|---|
| name | 字体名称。 | 'Arial', 'Calibri', etc. |
| family | 备用字体家族。整数值。 | 1 - Serif, 2 - Sans Serif, 3 - Mono, Others - unknown |
| scheme | 字体方案。 | 'minor' , 'major', 'none'==>重要，与不那么重要的 |
| charset | 字体字符集。整数值。 | 1, 2, etc. |
| size | 字体大小。整数值。 | 9, 10, 12, 16, etc. |
| color | 颜色描述，一个包含 ARGB 值的对象。 | { argb: 'FFFF0000'} |
| bold | 字体 粗细 | true, false |
| italic | 字体 倾斜 | true, false |
| underline | 字体 下划线 样式 | true, false, 'none', 'single', 'double', 'singleAccounting', 'doubleAccounting' |
| strike | 字体 删除线 | true, false |
| outline | 字体轮廓 | true, false |
| vertAlign | 垂直对齐 | 'superscript', 'subscript' |
<3>设置对齐方式
// 设置对齐方式
row.alignment = {vertical: 'middle', horizontal: 'left', wrapText: false,};
// 设置对齐方式
cell.alignment = {vertical: 'middle', horizontal: 'left', wrapText: false,};
<4>合并行和列
// worksheet.mergeCells('A2:B3');
// worksheet.mergeCells('A2','B3');
// 按开始行，开始列，结束行，结束列合并（相当于 A2:B3）
worksheet.mergeCells(2,3,1,2);
<5>多表头实现
就把第一行数据也当作表头来处理就好^_^
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
