EXCELJS - adding an image above the column headers in exceljs - exceljs

Question

I am using exceljs library in react application.
I am inserting my company logo on top of my data (and their headers), but my code just inserts it on top of everything.
const imageId2 = workbook.addImage({
base64: myBase64Image,
extension: 'png',
});
worksheet.addImage(imageId2, 'A1:D3');
worksheet.mergeCells('A1:D3');
worksheet.getRow(1).font = {
name: 'Arial Black',
bold: true,
};
worksheet.columns = rowHeader;
worksheet.addRows(dataTableRows);
workbook.xlsx.writeBuffer().then(data => {
const blob = new Blob([data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
Alternatively, I could do this hack, but I don't know how to do this dynamically:
worksheet.addRow([rowHeader[0].key, rowHeader[1].key, rowHeader[2].key]);

Answer 1

https://github.com/exceljs/exceljs/issues/433
row headers looks like this:
const rowHeader = [
{ key: 'xxx' },
{ key: 'adsff' },
{ key: 'ff' },
{ key: 'ffff' },
{ key: 'sdfasdf' },
{ key: 'fasdfads' },
{ key: 'fasdfasdf' },
{ key: 'fasdfadf' },
{ key: 'fasdfawsdft' },
];
const imageId2 = workbook.addImage({
base64: myBase64Image,
extension: 'png',
});
worksheet.addImage(imageId2, 'A1:D3');
worksheet.mergeCells('A1:D3');
worksheet.addRow({});
const col: string[] = [];
rowHeader.forEach(header => {
col.push(header.key);
});
const columnHeaders: string[] = Object.values(col);
worksheet.getRow(5).values = columnHeaders;
worksheet.getRow(5).font = {
name: 'Arial Black',
bold: true,
};
worksheet.columns = rowHeader;
worksheet.addRows(dataTableRows);
workbook.xlsx.writeBuffer().then(data => {
const blob = new Blob([data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const a = window.document.createElement('a');
const downloadUrl = window.URL.createObjectURL(blob);
a.href = downloadUrl;
a.download = `${fileName}.xlsx`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(downloadUrl);
});