ExcelJs导出Excel文件并设置单元格样式

下载exceljs并引入

数据源格式：二维数组，null值是后面要合并单元格的，占个位置。

//创建对象

var wb = new ExcelJS.Workbook();

//创建一个名称为Sheet1的sheet页，并填充背景色为红色
var ws = wb.addWorksheet("Sheet1", { properties: { tabColor: { argb: 'FFFFFF' } } });

//将数据源添加到sheet页中

ws.addRows(data);

//设置默认单元格样式

var style = {
fill: { //背景色填充
type: 'gradient',
gradient: 'angle',
degree: 0,
stops: [
{ position: 0, color: { argb: 'FFAFEEEE' } },//单元格渐变色（左）
{ position: 0.5, color: { argb: 'FFAFEEEE' } },//单元格渐变色（中）
{ position: 1, color: { argb: 'FFAFEEEE' } }//单元格渐变色（右）
]
},
font: {
name: '宋体',
size: 11,
bold: false,
},
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: false,
},
border: {
top: {
style: "thin",
},
bottom: {
style: "thin",
},
left: {
style: "thin",
},
right: {
style: "thin",
},
},
}

//设置单元格样式 (cellName:'A1')

ws.getCell(cellName).style = style;

//合并单元格（将cellName1至cellName2的单元格合并）

//单元格样式与合并单元格都需要每个单元格单独设置，如果较多可以创建数组，遍历设置。

ws.mergeCells(cellName1, cellName2);

//查找重复的内容，自动合并单元格（仅限纵向合并）

//例子：MergeColumn(ws, 1, 0, ws._rows.length); 将A列重复的文字合并
function MergeColumn(sheet, StartRowNum, ColumnIndex, LastRowNum) {
var rowNum = 0; //初始化为数字，便于计算
for (var i = StartRowNum; i < LastRowNum + 1; i++) {
var startCellName = getColumnNameByIndex(ColumnIndex) + i;
var startValue = sheet.getCell(startCellName).value;
for (var k = i + 1; k < LastRowNum + 1; k++) {
var currCellName = getColumnNameByIndex(ColumnIndex) + k;
var currValue = sheet.getCell(currCellName).value;
if (startValue != currValue) {
if (k != i + 1) {
//合并到前一个单元格
rowNum = k - 1;
var preCellName = getColumnNameByIndex(ColumnIndex) + rowNum;
sheet.mergeCells(startCellName, preCellName);
i = k - 1; //从k开始继续
}
break;
} else if (k == LastRowNum) {
//连同最后一行合并
sheet.mergeCells(startCellName, currCellName);
//sheetMerge.push({ s: { r: i, c: ColumnIndex }, e: { r: LastRowNum, c: ColumnIndex } });
i = LastRowNum; //结束外层循环
break;
}
}
}
}

//Excel/Sheet根据索引输出列名
function getColumnNameByIndex(i) {
var result = String.fromCharCode('A'.charCodeAt() + i % 26);

while (i >= 26) {
i /= 26;
i--;
result = String.fromCharCode('A'.charCodeAt() + i % 26) + result;
}
return result;
}

//导出excel
function saveAs(blob, fileName) {
//生成一个a标签
var a = document.createElement('a');
a.style.display = 'none';
a.download = fileName;
a.id = "aexport";
//生成一个label标签，用于触发a标签点击事件
var lb = document.createElement('label');
lb.
for = "aexport";
a.appendChild(lb);
//创建一个URL对象，指向Blob对象
var objectURL = window.URL.createObjectURL(blob);
a.href = objectURL;

//把a标签加入body
document.body.appendChild(a);
//触发a标签点击事件
lb.click();
//IE不支持createObjectURL，特殊处理
if (_isIE()) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
//删除a标签
document.body.removeChild(a);
//回收内存
URL.revokeObjectURL(objectURL);
}

导出效果图：

ExcelJs导出Excel文件并设置单元格样式相关推荐

POI：java导出excel，java设置单元格公式，求和
POI:java设置单元格公式,求和 java导出excel,之前写过全量导出,但是有时候报表中需要汇总,或者其他公式的数据. 这里就需要对单元格的格式调整,设置公式主要代码 //给单元格设置公式 ...
POI导出Excel文件时，单元格内文字竖排、横排默认不展示，必须点击一下问题解决
//创建单元格样式设置CellStyle cs_vertical = wb.createCellStyle();//设置字体Font textFont = wb.createFont();textFo ...
easyexcel导出excel文件合并相同单元格数据
1.引入easyexcel依赖 !-- 阿里开源easyexcel--><dependency><groupId>com.alibaba</groupId>& ...
Laravel Excel实现Excel/CSV文件导入导出的功能详解（合并单元格，设置单元格样式）
Laravel Excel实现Excel/CSV文件导入导出(合并单元格,设置单元格样式) 这篇文章主要给大家介绍了关于在Laravel中如何使用Laravel Excel实现Excel/CSV文件导 ...
js vue 设置excel单元格样式_vue+elementui 项目纯前端Export2Excel导出excel，并利用xlsx-style设置单元格样式...
1 /*eslint-disable*/ 2 require('script-loader!file-saver');3 require('./Blob.js'); //blob.js也是网上找的,下 ...
java导出excel 复杂的合并单元格
导出excel 复杂的合并单元格 private void exportExcel(List<IuDocStatisticsExcelVo> iuDocStatisticsVos, St ...
使用poi导出excel，及合并单元格边框显示问题
使用poi导出excel,及合并单元格边框显示问题. 首先创建workbook.sheet HSSFWorkbook workbook = new HSSFWorkbook();HSSFSheet s ...
java使用poi生成Excel文件并合并单元格
java使用poi生成Excel文件并合并单元格业务需要根据分管部门字段进行合并,现在提供一种思路. controller层 @Inject(target = "/inf ...
Java POI导出Excel时，合并单元格没有边框的问题
今天用POI导出Excel的时候,发现导出的单元格确少边框,最后发现有2个方案可以解决. 方案一 CellRangeAddress的4个参数分别表示:起始行号,终止行号, 起始列号,终止列号 // 使 ...

ExcelJs导出Excel文件并设置单元格样式

ExcelJs导出Excel文件并设置单元格样式相关推荐

最新文章

热门文章