Skip to content

[BUG] addImage function is not working as expected in version 4.4.0 #2580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
premjo opened this issue Nov 2, 2023 · 1 comment
Open

[BUG] addImage function is not working as expected in version 4.4.0 #2580

premjo opened this issue Nov 2, 2023 · 1 comment

Comments

@premjo
Copy link

premjo commented Nov 2, 2023

🐛 Bug Report

Generating the excel with image is broken in version 4.4.0, I have scenario where we need to add image into each row of the column. I have used the function addImage.

Lib version: 4.4.0

Steps To Reproduce

The below code generate the excel sheet, which would have headers (Column 1, Column 2, Column 3) along with data row with respective header. But the generated excel is broken, the images miss aligned in order and size.

image

const ExcelJs = require('exceljs');
const path = require('path');
const items = [
    { col1: "abc", col2: new Date(), col3: "dummyImage.jpg" },
    { col1: "dummy1", col2: new Date(), col3: "dummyImage.jpg" },
    { col1: "dummy2", col2: new Date(), col3: "dummyImage.jpg" }
]
const generateExcel = async () => {
    const workbook = new ExcelJs.Workbook();
    let ws = workbook.addWorksheet('my first worksheet');
    ws.columns = [
        { header: 'column 1', key: 'col1' },
        { header: 'column 2', key: 'col2' },
        { header: 'column 3', key: 'col3' }
    ];
    ws.getRow(1).eachCell((cell) => {
        cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: '0082f0' }
        };
        cell.font = { bold: true, color: { argb: 'fafafa' } }
    })
    // add a filter to the header row
    ws.autoFilter = 'A1:C1';
    // freeze the header row
    ws.views = [
        { state: 'frozen', xSplit: 0, ySplit: 1, topLeftCell: 'A2', activeCell: 'A2' }
    ];
    let rowPos = 2;
    for (let item of items) {
        ws.addRow({
            col1: item.col1,
            col2: item.col2
        })
        if (item.col3) {
            const imageId = workbook.addImage({
                filename: path.join('images', item.col3),
                extension: 'jpeg',
            });
            let cellName = `C${rowPos}:C${rowPos}`;
            ws.addImage(imageId, cellName);
        }
        let lastRow = ws.lastRow;
        lastRow.height = 115;
        rowPos++;
    }
    const filename = `todo.xlsx`;
    await workbook.xlsx.writeFile(filename);
    return filename;
}
generateExcel();

The expected behaviour:

image
This is output of the exceljs version 4.3.0 with same above code

The excel which get generated should have sheet with three columns and each row data get align with respective order along with image.

Possible solution (optional, but very helpful):

@motinados
Copy link

Due to changes in anchor.js (#1934) , it seems that a new row may be added when using addImage.
Until this is fixed, it is advisable to explicitly specify the row to use when employing addImage.
For instance, the following code should work.

let rowPos = 2;
for (let item of items) {
  const imageId = workbook.addImage({
    filename: path.join("images", item.col3),
    extension: "jpeg",
  });
  let cellName = `C${rowPos}:C${rowPos}`;
  ws.addImage(imageId, cellName);

  const row = ws.getRow(rowPos);
  row.values = [item.col1, item.col2];
  row.height = 115;

  rowPos++;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants