Forum Discussion

Coder's avatar
Coder
Copper Contributor
Sep 15, 2025

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

  • NikolinoDE's avatar
    NikolinoDE
    Platinum 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.

    • Coder's avatar
      Coder
      Copper 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.

      • NikolinoDE's avatar
        NikolinoDE
        Platinum 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

Resources