Forum Discussion
Excel: Desktop App correctly embeds images; web viewers like OneDrive often show them incorrectly.
Thanks for replying out. Sure, I will try for suggestions in forums as well. If found any approach to resolve this issue, might be helpful in future.
The best practical workaround what I found at the time is:
Create a hidden or dedicated sheet just for storing images
- When using workbook.addWorksheet(), make one sheet called "Images" (or similar).
- Insert all your images into this sheet using worksheet.addImage().
- Don’t worry if this sheet is not meant for the end-user — you can hide it later.
Add your real data sheets after the image sheet
- When you build the workbook with ExcelJS, create the "Images" sheet first.
- Then add your other sheets ("Report1", "Report2", etc.) where you place references/text.
Do not reorder sheets later
- The bug in Excel Online is triggered when sheets containing images are reordered.
- So instead of generating them and then changing the order with something like workbook.worksheets.move(), generate in the correct order from the start.
Optional: Hide the "Images" sheet
- So that users won’t see it, but the workbook still keeps images stable.
Excel Online seems to break image references if sheets are reordered after images are embedded. By fixing the order at creation time (image sheet first → data sheets after), the file’s internal XML references (xl/drawings) stay consistent, so images display correctly in the browser.
Here a short ExcelJS code sample that demonstrates this safe creation order (image sheet first, then ordered text sheets).
const ExcelJS = require('exceljs');
const fs = require('fs');
async function createWorkbook() {
const workbook = new ExcelJS.Workbook();
// 1. Create dedicated "Images" sheet FIRST
const imgSheet = workbook.addWorksheet("Images");
// Load an image (example PNG file)
const imageId = workbook.addImage({
filename: "logo.png", // or base64: "data:image/png;base64,...."
extension: "png"
});
// Insert image into the Images sheet
imgSheet.addImage(imageId, {
tl: { col: 0, row: 0 }, // top-left anchor
ext: { width: 200, height: 100 } // size in pixels
});
// 2. Add your "real" data/report sheets AFTER
const report1 = workbook.addWorksheet("Report1");
const report2 = workbook.addWorksheet("Report2");
// Fill with some demo data
report1.getCell("A1").value = "Report 1 Data";
report2.getCell("A1").value = "Report 2 Data";
// (Optional) You could add more images directly to these sheets if needed,
// but avoid reordering sheets once created.
// 3. (Optional) Hide the Images sheet so users don’t see it
imgSheet.state = "hidden";
// 4. Save workbook
await workbook.xlsx.writeFile("SafeWorkbook.xlsx");
console.log("Workbook created successfully!");
}
createWorkbook();
Always create the "Images" sheet first, then create your “real” sheets in the final order you want to see.
Do not reorder sheets afterward → that’s what triggers the bug in Excel Online.
You can hide the image sheet so end users only see the data sheets.
Hope this could help you a little