准备工作
这里因为sheetJs带样式的导出是需要付费的,那么这里就只能使用excelJs来做带样式的导出了
引入项目
excelJs主要多用于node服务端。这里我是Vue的单页面项目,要使用浏览器版本。那么可以如下方式引入
1、直接cdn引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/1.10.0/exceljs.min.js"></script>
2、本地引入
在static文件夹中保存该js文件。
继而在index.html中引入
<script src=<%= htmlWebpackPlugin.options.path %>/exceljs/exceljs.min.js></script>
建立导出模板
插件公用文件中:
/**
* 大批量导出excel数据文件
*/
Vue.prototype.$ExportKey = {
TestExprot: {
title: "采购跟踪报表数据Excel模版",
sheetName: "采购跟踪报表",
header: [{
label: "名称",
key: "name",
width: 50,
style: {
font: {
size: 9
}
}
}, {
label: "编码",
key: "code",
width: 50,
style: {
font: {
size: 9
}
}
}]
}
}
核心导出逻辑
导出文件核心代码
/**
* 导出大数据文件
* data:后端返回的数据
* sheet:表示需要渲染的模板
*/
Vue.prototype.$ExportByMoreData = function (data, sheet) {
var workbook = new ExcelJS.Workbook();
var worksheet = workbook.addWorksheet(sheet.sheetName);
worksheet.columns = sheet.header; //添加表头
let titleList = [];
let headers = [];
sheet.header.forEach((item) => {
titleList.push(sheet.title);
headers.push(item.label)
})
worksheet.getRow(1).values = titleList //表标题
worksheet.getRow(2).values = headers //表头
worksheet.views = [{ //设置滚动固定表头
state: 'frozen',
xSplit: 0,//设置最左边固定列数,0表示不固定
ySplit: 2,//设置头部固定行数,2表示固定表头和表标题
activeCell: 'A1'
}];
worksheet.getCell('A1').font = { //设置标题字体粗体
bold: true
};
worksheet.getCell('A1').alignment = { //设置标题居中
vertical: 'middle',
horizontal: 'center'
};
worksheet.addRows(data);
let mergeCellsEnd = String.fromCharCode(65 + (sheet.header.length - 1)) //获取结尾列
worksheet.mergeCells(`A1:${mergeCellsEnd}1`) //合并单元格
sheet.header.forEach((item,index) => {
let Cell= String.fromCharCode(65 + index)
worksheet.getCell(`${Cell}2`).fill = {//设置表头背景色
type: 'pattern',
pattern:'darkVertical',
fgColor:{argb:'FEFB00'},//这里前景色设置和背景色一直,否则会有默认的黑色。
bgColor:{argb:'FEFB00'}//背景色
};
worksheet.getCell(`${Cell}2`).font = {
size: 11//设置表头字体大小
};
})
let blob = ""
workbook.xlsx.writeBuffer().then((data) => {
blob = new Blob([data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
});
saveAs(blob, `${sheet.title}.xlsx`);
});
}
使用
直接在需要导出的地方调用
//其中data是后端返回的数据集
//this.$ExportKey.TestExprot是需要渲染的模板
this.$ExportByMoreData(data,this.$ExportKey.TestExprot)
效果:
滚动固定表头:
更多功能的使用请前往ExcelJs