Inserting Images into Excel Cells via JavaScript in a Chrome Extension

Other Questions JavaScript
1 
I'm working on a Chrome extension and need help adding pictures directly into Excel (.xlsx) cells. I'm using JavaScript to get image info and SheetJS to make the Excel file. But I can't get the images to show up in the cells. They either appear as links or don't show up at all.

Here's what I'm trying to do:

1. Get image URLs from HTML like this:
   <img alt="LED Light" src="example.com/image.webp">

2. Put these images into Excel cells

I found some code that works on Node, but it doesn't work in my extension. Here's a simplified version of what I'm trying:

```javascript
function addImageToExcel() {
  const workbook = createWorkbook();
  const sheet = workbook.addSheet("Images");

  const imageData = [
    { id: 1, url: "example.com/image1.webp" },
    { id: 2, url: "example.com/image2.webp" }
  ];

  sheet.addColumn("ID");
  sheet.addColumn("Image");

  imageData.forEach(item => {
    const row = sheet.addRow();
    row.setCell("ID", item.id);
    // How do I add the image here?
  });

  saveWorkbook(workbook);
}

Any ideas on how to make this work in a Chrome extension?

2

I’ve grappled with this exact problem in my own Chrome extension development. From my experience, the free version of SheetJS doesn’t support direct image insertion, which is a real pain.

One workaround I found somewhat effective was using data URLs. Essentially, you convert the image to a Base64 string and set that as the cell value. It’s not perfect, but it gets the job done in a pinch.

Here’s a rough idea of how you might implement this:

  1. Fetch the image and convert it to a Base64 string
  2. Set the cell value to a formula that displays the image

Something like:

sheet.cell(row, col).formula(=IMAGE(\"data:image/jpeg;base64,${base64String}\"))

Keep in mind, this approach has its drawbacks. It significantly increases file size and might not play nice with all Excel versions. Plus, you’ll need to navigate CORS issues when fetching images.

If you need a more robust solution, you might want to look into paid libraries with better image support or consider generating a CSV and instructing users to add images manually in Excel.

3

I’ve wrestled with this issue before in a Chrome extension project. The challenge is that SheetJS doesn’t natively support image insertion in the free version. A workaround I found was to use Base64 encoding for the images.

Here’s the approach:

Fetch the image and convert it to Base64.
Use the XLSX.utils.book_append_sheet() method to add the image as a separate worksheet.
Set the cell value to a formula that references the image.

Keep in mind this method has limitations. It increases file size and might not work perfectly for all Excel versions. Also, you’ll need to handle CORS issues when fetching images.

If you need a more robust solution, consider using a paid library like ExcelJS, which has better image support. Alternatively, you could generate a CSV file and instruct users to manually add images in Excel.

4

hey, i’ve dealt with this before. the free sheetjs doesn’t do images well. u could try base64 encoding, but it’s not great. maybe look at exceljs? it costs but handles images better. or just make a csv and tell peeps to add pics themselves. good luck!