Image embedding displays correctly on the Excel desktop application, the online viewer such as Onedrive or Sharepoint has different rendering behavior, causing same images to appear on all sheets

Hi Nghia-P,

Thanks for responding and I appreciate your help.

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,

Sample file

While exporting to PDF or using Print option works fine with the exact images, only the online view fails. (Please feel free to test this using the shared file).

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.

Thanks.

Hi Srinidhi Anand,

Thanks for sharing the sample code and file link. This really helps narrow things down. Unfortunately, the SharePoint link requires specific access permissions (it didn't load content for me, likely due to organizational sharing settings), but based on my research, along with your code and the description of images overwriting across sheets in the browser view (while Desktop and PDF exports render fine), this seems like a known rendering quirk in Excel Online with one-cell anchored images during multi-sheet merges. Excel Online handles pixel-based anchors (tl + ext) more strictly, leading to offsets or "leaks" between sheets.

Your merger code looks solid overall. It properly extracts and re-adds images with fresh IDs and buffers, preserving the source range. The main issue is passing the source image.range directly, which defaults to one-cell anchors that Desktop auto-adjusts but browsers mishandle.

I recommend switching to two-cell anchors (tl + br) for better stability in Excel Online. It ties images to the cell grid, avoiding cross-sheet issues. Approximate br based on ext dimensions and the destination sheet's row/column sizes.

async function excelMerger() { 

  const destinationWorkbook: _Workbook = new ExcelJS.Workbook(); 

  const files = ['sample.xlsx', 'sample1.xlsx']; // holds list of relative paths of files. 

  

  for (const file of files) { 

   const fileWorkbook: _Workbook = new ExcelJS.Workbook(); 

   await fileWorkbook.xlsx.readFile(file); 

  

   // loop each sheet 

   fileWorkbook.eachSheet((sourceSheet: _Worksheet, sheetId: number) => { 

     const destSheet: _Worksheet = destinationWorkbook.addWorksheet(sourceSheet.name); 

  

     // loop source sheet images 

     (sourceSheet.getImages() || []).forEach((image) => { 

       const imageData: _Media = fileWorkbook.model.media[image.imageId]; 

       const imageId = destinationWorkbook.addImage({ 

         extension: imageData.extension, 

         buffer: imageData.buffer, 

       }); 

  

       // Reconstruct range as two-cell anchor to fix online rendering 

       let range = image.range; 

       if (range.ext && !range.br) {  // Detect one-cell anchor and convert 

         const tl = range.tl; 

         const ext = range.ext; 

  

         // Get actual column/row sizes from dest sheet (fallback to defaults) 

         const startColIndex = Math.floor(tl.col) + 1;  // 1-based 

         const startRowIndex = Math.floor(tl.row) + 1; 

         const colWidthChars = destSheet.getColumn(startColIndex).width || 8.43; 

         const rowHeightPts = destSheet.getRow(startRowIndex).height || 15; 

  

         // Approx conversions: 1 char ≈ 7 pixels, 1 point ≈ 0.75 pixels (adjust if needed) 

         const colPixels = colWidthChars * 7; 

         const rowPixels = rowHeightPts * 0.75; 

  

         // Calculate span (add buffer for fractional offsets; ceil to avoid clipping) 

         const spanCols = Math.ceil((ext.width + (tl.col % 1) * colPixels) / colPixels); 

         const spanRows = Math.ceil((ext.height + (tl.row % 1) * rowPixels) / rowPixels); 

  

         range = { 

           tl: tl, 

           br: { 

             col: tl.col + spanCols, 

             row: tl.row + spanRows 

           }, 

           editAs: 'twoCell'  // Explicitly tie to cells for online compatibility 

         }; 

  

         // Optional: Resize spanning cells to better fit image (prevents distortion) 

         for (let c = startColIndex; c < startColIndex + spanCols; c++) { 

           destSheet.getColumn(c).width = Math.max(destSheet.getColumn(c).width || 8.43, ext.width / spanCols / 7); 

         } 

         for (let r = startRowIndex; r < startRowIndex + spanRows; r++) { 

           destSheet.getRow(r).height = Math.max(destSheet.getRow(r).height || 15, ext.height / spanRows / 0.75); 

         } 

       } 

 

       destSheet.addImage(imageId, range); 

     }); 

   

     // Copy other sheet data (cells, etc.) as before—add if not already 

     sourceSheet.eachRow({ includeEmpty: true }, (row) => { 

       const newRow = destSheet.addRow(row.values); 

       // Copy styles, etc., if needed 

     }); 

   }); 

  } 

  

  // Write the combined workbook to a new file 

  await destinationWorkbook.xlsx.writeFile(outputFilePath); 

} 

This approach should work because two-cell anchors force Excel Online to respect sheet boundaries, preventing overlaps (similar to reported fixes in ExcelJS for multi-image scenarios), and it uses dynamic sheet dimensions for accurate sizing.

Please test the updated code: Merge your samples, upload to SharePoint/OneDrive, and switch sheets in the browser. If slight shifts occur, fine-tune pixel conversions (e.g., via dev tools in Excel Online).

If you need quick workarounds:

• Desktop Normalize: Generate with ExcelJS, open/save in Desktop Excel, then upload. This rewrites XML for better Online compatibility.
• Compress Images: Use a library like sharp to resize/compress PNG buffers before adding (e.g., <200KB) to rule out size-related glitches.
• Linked Images: Linked Images via =IMAGE()**: If embedding isn't critical, extract images to a SharePoint folder, get their URLs, and insert formulas like =IMAGE("https://yoursharepoint.com/path/image.png", 1, 0) in cells. This renders reliably online but requires hosting.
• Update Version: Try ExcelJS 4.4.1+ for potential media handling patches.

I hope the information I've provided will be helpful to you. Please try out the steps above and let me know if any of them seem feasible and suitable for you. If there's any issue at all, feel free to let me know, I'm here to help.

Hi Nghia-P,

I have updated the sample file link (for reference in my previous answer).

Sure. Thanks for the detailed explanation and solution, let me try your approach and will post the updates.

Thanks.

Hi Srinidhi Anand,

Thank you for your response. I really appreciate your persistence!

I noticed that the JavaScript snippet is missing an important line at the top to import the ExcelJS library. To ensure the script runs correctly, please add the following line at the beginning of your file:

const ExcelJS = require('exceljs');

I hope this information is at least partially helpful for you. If you have any further questions, feel free to let me know.

Hi Nghia-P,

Thanks for the helpful information. But unfortunately, still facing same issue with the shared code snippet.

Output file

I would be glad if there are any alternate solutions to resolve it.

Thanks