使用ExcelJs导出表格设置样式、添加边框 |
您所在的位置：网站首页 › honchy鱼缸是什么牌子 › 使用ExcelJs导出表格设置样式、添加边框 |
|
需要用到exceljs和fileSaver 分别用npm安装一下 npm install -S exceljs npm install -S file-saver
创建一个js文件，用于存放导出的方法
import ExcelJs from 'exceljs';
import FileSaver from 'file-saver';
export async function portTable(name, t, titleName, tableData, title, widths) {
// name:下载的文件标题、工作簿名称
// t: 表头需要合并的单元格
// titleName: 表格第一行内容，是一个数组
// tableData: 数据
// title: 表头名
// width: 各列的宽度
const workbook = new ExcelJs.Workbook();
const worksheet = workbook.addWorksheet(name);
const row1 = worksheet.addRow(titleName);
row1.font = { bold: true, size: 20 ,color:{ argb: 'FFFF0000'}}; // 第一行标题样式
worksheergeCells(t); // 合并单元格
worksheet.getRow(1).getCell(1).alignment = { // 找到第一行的第一个单元格
vertical: 'middle', horizontal: 'center' // 垂直居中，水平居中
}
worksheet.getCell("A1").fill={ // getCell("A1") == getRow(1).getCell(1)
type: 'pattern',
pattern:'solid',
fgColor:{ argb: 'FF0000FF'} // 设置单元格背景色
}
const handleData = tableData;
const columns = title;
worksheet.addTable({
name: name,
ref: 'A2', // 从A2单元格添加表格
style: {
theme: '',
showRowStripes: true
},
columns: columns, // 列
rows: handleData // 行
});
const width = widths;
columns.forEach((r, i) => { // 控制列的宽度，以及对齐方式
worksheet.getColumn(i + 1).width = width[i];
worksheet.getColumn(i + 1).alignment = { vertical: 'middle', horizontal: 'center' }
})
// 添加边框
for (let num = 0; num // 循环出每一个单元格
worksheet.getRow(num+1).getCell(index+1).border={ // 为单元格添加边框
top: {style:'thin'},
left: {style:'thin'},
bottom: {style:'thin'},
right: {style:'thin'}
}
}
}
// console.log(worksheet.lastRow._number);
const buffer = await workbook.xlsx.writeBuffer();
return FileSaver(new Blob([buffer]), name + '.xlsx')
}
使用时引入一下这个方法
数据 tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 4 }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 3 }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 4 }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 1 }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 2 }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 4 }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', start: 2 }],使用方法，创建一个按钮，绑定事件 // 导出表格exceljs exportTableSheet() { const columns = [ { name: '时间' }, { name: '姓名' }, { name: '地址' }, { name: '起点' } ]; const width = [40, 40, 40, 40]; const data = this.tableData.map(r => { return [r.date, r.name, r.address, r.start] }) portTable( // 调用方法，记得使用前要import一下 '这是一个表格啊', 'A1:D1', ['这是一个表格'], data, columns, width ) } 总结xlsx、xlsxStyle和fileSaver一起使用也可以导出表格，并且设置表格样式，但是就目前来看，ExcelJs安装后可以直接使用，不用去解决依赖包的报错问题，还是不错的。 另外，使用ExcelJs还可以参考这篇文章ExcelJS 使用帮助文档 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |