[BUG] a.Readfile is not a function when exporting excel with images

[gitalvininfo]

💬 Questions and Help

I have successfully exported excel file with image using base64 file, however when I try to add an image using filename such as this

var imageId1 = workbook.addImage({ filename: 'path/to/image.jpg', extension: 'jpeg', });

An error occurs which is TypeError: a.readFile is not a function. I used this on frontend (Angular9) and my guess is that this library is nodejs that's why it does not work as expected.

Please let me know if I miss something with my code or if my guess is correct, is there any alternative to add an image using a filename for frontend use.

Thanks in advance

[FrederickGeek8]

This also appears to affect v4.2.1 on the frontend (SPA) as well. To workaround this issue, I decided to load in via Buffer, e.g.

// add image to workbook by buffer
const imageBuffer = await axios.get('path/to.image.png', { responseType: 'arraybuffer' });
const imageId2 = workbook.addImage({
  buffer: imageBuffer.data,
  extension: 'png',
});

Though you don't have to use axios. As long as you can get an ArrayBuffer from your request (either by conversion or directly), then you can use this method.

[pytdata]

Hello @FrederickGeek8 this is my code and am getting the same error. Please kindly help me out here. Thanks.

 `async function exTest() {
    const wb = new ExcelJS.Workbook();
    const ws = wb.addWorksheet('My Sheet')

    ws.columns = [
        {header: 'Id', key: 'id', width: 10},
        {header: 'Name', key: 'name', width: 32},
        {header: 'D.O.B.', key: 'dob', width: 15,},
    ]

    // add image to workbook by base64
    let myBase64Image
    let bb = codecBase64('http://localhost/valid/nmk.png', (blob)=>{
        myBase64Image = blob
    })
    const imageId2 = wb.addImage({
        base64: myBase64Image,
        extension: 'png',
        type: 'image',
        filename:'nmk'
    })

    ws.addImage(imageId2, 'E1:G6')
    ws.addImage(imageId2, 'E8:G13')
    ws.addImage(imageId2, 'E10:G19')
   
    ws.addRow({id: 1, name: 'John Doe', dob: new Date(1970, 1, 1)})
    ws.addRow({id: 1, name: 'Jane Doe', dob: new Date(1970, 1, 1)})
    ws.addRow({id: 2, name: 'Mary Jane', dob: new Date(1965, 1, 7)})

    await wb.xlsx.writeBuffer()
        .then(buffer => FileSaver.saveAs(new Blob([buffer]), `${Date.now()}_feedback.xlsx`))
        .catch(err => console.log('Error writing excel export:', err))
}`

[RAJEEV2510]

You Can Do this way Its work
const imageSrc = '';
const response = await fetch(imageSrc); const buffer = await response.arrayBuffer();
let logo = workbook.addImage({ buffer: buffer, extension: 'jpeg',
});

[AlanGolphi]

I try to use the image in another folder, but not work. So I draw the image to canvas and convert to base64Data, and add the base64Data in workbook to get a imgId, and use imgId in worksheet.

const imageToUse = require('..path/name.png')
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.onload = () => {
    ctx.drawImg(img, x, y)
  }
  img.src = imageToUse

  const base64Data = ctx.toDataURL()
  
  const imgId = workbook.addImage({
    base64: base64Data,
    extension: 'jpeg'
  })
  
  worksheet.addBackgoundImage(imgId)