[BUG] a.Readfile is not a function when exporting excel with images · Issue #1244

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

💬 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

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

Apr 23, 2021

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.

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))
          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',

          
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)