I was able to solve it referring the following link.If you need to styling the .xlsx file you have to turn into its folk project called xlsx-style.When i write this post the branch is not merge to the xlsx master
.So you have to download necessary JS files using npm.
Import jszip.js
and xlsx.min.js
files into your HTML file and do your coding.You can use Cell object
to add cell styles.
Sample Cell styles code snippet.
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
for(var R = 0; R != data.length; ++R) {
for(var C = 0; C != data[R].length; ++C) {
if(range.s.r > R) range.s.r = R;
if(range.s.c > C) range.s.c = C;
if(range.e.r < R) range.e.r = R;
if(range.e.c < C) range.e.c = C;
var cell = {};
//Set Header col styles
if(R <= 0){
cell = {
v: data[R][C],
s : {
fill : {
fgColor : {
theme : 8,
tint : 0.3999755851924192,
rgb : '7DCEA0'
}
},
font : {
color : {
rgb : "FFFFFF"
},
bold : true,
sz : "14"
}
}
};
} else if (data[R][C] == "SUCCESSFUL") {
//You can check any conditions on text and add styles you wanted.
}else{
//Set other cells styles
cell = {
v : data[R][C],
s : {
fill : {
fgColor : {
theme : 8,
tint : 0.3999755851924192,
rgb : '08CB26'
}
},
font : {
color : {
rgb : "FFFFFF"
},
bold : true
},
border : {
bottom : {
style : "thin",
color : {
theme : 5,
tint : "-0.3",
rgb: "E8E5E4"
}
}
}
}
};
}
if(cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({c:C,r:R});
if(typeof cell.v === 'number') cell.t = 'n';
else if(typeof cell.v === 'boolean') cell.t = 'b';
else if(cell.v instanceof Date) {
cell.t = 'n'; cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
}
else cell.t = 's';
ws[cell_ref] = cell;
}
}
Set col width
var wscols = [ {
wch : 40
}, {
wch : 40
}, {
wch : 20
}, {
wch : 20
}, {
wch : 40
}, {
wch : 40
}, {
wch : 20
}, {
wch : 20
}, {
wch : 20
}, {
wch : 20
}, {
wch : 20
}, {
wch : 40
}, {
wch : 40
} ];
ws = sheet_from_array_of_arrays(myRestData);
ws['!cols'] = wscols;
...