Forum Discussion
Excel: Desktop App correctly embeds images; web viewers like OneDrive often show them incorrectly.
Hi,
I am facing issue with Image embedding using ExcelJS. When embedding images in a single Excel file from multiple source excel files, problems arise when the file is opened in online excel view like oneDrive site.
While the same excel file with embedding images appear correctly In desktop view, they become overwritten across different sheets in the browser view, affecting the integrity of the data. But while exporting to PDF or using Print option on the excel browser view works fine with the exact images, issue exists only in the online web view fails.
Details:
- Library used: ExcelJS 4.4.0
- Image Format: PNG
- Embedding Method: addImage Method of worksheet using unique imageId
- Positioning: tl anchor point and extension
- Platform: share point online in Microsoft 365 Browser
- Affected: chrome, Firefox, Edge.
Following things are tried from our end.
Same issue persists in the incognito browser as well. Based on our business needs, our main priority is to view files in oneDrive or sharePoint site to make it shareable with teammates and clients in an ease manner.
For better insights, I would like to share sample code for reference, Please feel free to test this using the shared file.
https://1drv.ms/x/c/d398d8e103d503ce/EfVcgLiXM-5HnagfHF5AF98B-PTz112QtABXyRqGp8CSMQ?e=HNdsgD
I have tried an approach to insert sheets of embedded images followed by set of text sheets. Then images are embedded correctly in excel online view, But if I try to order sheets, then the same embedding issue occurs.
Samples files are https://1drv.ms/x/c/d398d8e103d503ce/EUVq-5QTzg9Oh3oqS5Rb0cIBUiKb0bI-3t7H_0cOKG_HYA?e=A5IryN and https://1drv.ms/x/c/d398d8e103d503ce/ER3-hNYm3btDkkkTXH2aMpgBEakvQSmJNAZ_0RZsBe7f4Q?e=of47kX.
Expected behavior: The images should remain unique and correctly placed in their respective sheets while viewing from the Sharepoint or OneDrive site. The behavior should match that observed in the excel desktop application.
Hope this gives better details to resolve the issue. It will be really helpful if we can get past this issue to ensure smooth data maintenance. Please let me know if there are any approaches to resolve it since our business needs require ordered sheets
Thanks in advance.
4 Replies
- NikolinoDEPlatinum Contributor
There doesn't seem to be a fix released by Microsoft yet (as far as I'm aware) that guarantees that images embedded via ExcelJS will display as correctly in Excel Online/OneDrive/SharePoint as they do in the desktop app. However, you can try some suggestions in Forums like, GitHub or StackOverflow.
My answers are voluntary and without guarantee!
Hope this will help you.
- CoderCopper Contributor
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.
- NikolinoDEPlatinum Contributor
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