Angular exceljs adding an image gives the error: u.readFile is not a function at exceljs.min.js:3:449768 Angular application

[Stephen Holdorf]

I am developing in Angular 12 with the exceljs package. I am trying to add an image to a Workbook and the TS below produces and throws the client side exception: Error: Uncaught (in promise): TypeError: u.readFile is not a function TypeError: u.readFile is not a function at exceljs.min.js:3:449768 Here is the code I am calling:

let imageSrc = '\\assets\\images\\graph.jpeg'

var imageId1 = workbook.addImage(
  {
    filename: imageSrc,
    extension: 'jpeg',
  });

workbook.xlsx.writeBuffer().then((data) => {
  let blob = new Blob(\[data\], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  fs.saveAs(blob, 'Random Number Generator.xlsx');
});

[Richard Deeming]

Based on this GitHub issue[^], it looks like addImage can't use the path of an image on the server to generate a file on the client. The suggested workaround is to load the image as a buffer. The code in the issue uses axios, but you could use the fetch API instead[^]:

const imageSrc = '/assets/images/graph.jpeg';
const response = await fetch(imageSrc);
const buffer = await response.arrayBuffer();
const imageId1 = workbook.addImage({
buffer: imageBuffer.data,
extension: 'jpg'
});

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer