The error message displayed in Angular indicates that the function u.readFile is not recognized

I've been attempting to export some data along with an image into Excel, but I keep encountering the error message TypeError: u.readFile is not a function. Despite trying alternative methods like buffer and base64, they all result in similar errors, such as TypeError: XXX is not a function. Below is the snippet of code from my app.component.ts file. I'm currently using Angular 13.2.0, so any help or suggestions would be greatly appreciated!

import * as FileSaver from 'file-saver';
import { Workbook } from 'exceljs';


 exportFile(){

    let workbook = new Workbook();
    let worksheet = workbook.addWorksheet('sheet1');
    let header = ['Days Ordered', 'Times Range', 'Total Spots', 'Air Date', 'Day', 'Time', 'Length', 'Sub Total'];
    worksheet.addRow(header);

    //add image
    const image = workbook.addImage({
      filename: 'assets/logo.png',
      extension: 'png',
    });
    worksheet.addImage(image, "A1:B3");

    workbook.xlsx.writeBuffer().then((data) => {
      let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      FileSaver.saveAs(blob, 'AdReport'+'-'+new Date().valueOf()+'.xlsx');
    });
  }

Answer №1

Here's a way to get it done successfully

const imageUrl = ''; 
const imgResponse = await fetch(imageUrl);
const imgBuffer = await imgResponse.arrayBuffer();
let companyLogo = workbook.addImage({
            buffer: imgBuffer,
            extension: 'jpeg',
        });
  worksheet.addImage(companyLogo, 'B5:C9');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular form retains the previous value when saving

I encountered an issue with my form component where it displays previous values instead of updated ones during a save operation. The strange part is that if I close the form and reopen it, the new values are then shown correctly. It seems like the problem ...

Tips to declare a return type for a function that includes an optional formatter function parameter

I'm currently exploring how to correctly define the return value when working with an object that includes optional formatter functions. Everything is running smoothly for a function with a single value. type Params = { id?: number created?: ...

Angular 2 ngIf displaying briefly before disappearing

Encountering a strange issue with an Angular 2 ngIf statement where it appears on the page for a brief moment and then disappears. The content is visible, but it doesn't remain on the page. I suspect it might be related to some asynchronous behavior. ...

Disabling the experimental app directory feature in NextJs

I've been working on a real-life project and decided to test out the new App directory feature that comes with Next.js version 13. However, I encountered some issues such as images and fonts not loading properly. Now, I'm looking to opt out of th ...

How to convert an attribute of an object within a list to a string separated by commas in TypeScript and Angular

I am working with an array of person objects in Angular 5 and displaying them in HTML using ngFor. The Person objects also contain an array of Role objects. persons:Array<Person>=[]; Each Role object is structured like this: export class Role{ ...

What is the process for defining a collection of strings as a data type?

Is there a way to define a strict type for a group of strings that users must adhere to? I want to restrict input to only be one of the predefined strings in the group. How can I achieve this? This is my current approach: const validTypes: Array<strin ...

Troubleshooting Angular's CORS problem by querying an endpoint at 5-second intervals

My angular application is set up to query a node/express backend endpoint every 5 seconds, but I am encountering occasional CORS errors. Scenario A user initiates a transaction, which is then added to the database with a "Pending" status The frontend co ...

React with TypeScript: The children prop of this JSX tag is specifically looking for a single child of type ReactNode, but it seems that multiple children were passed instead

For my class project in APIs, I am using react-typescript but running into issues. My problem arises when attempting to loop through an array of "popular" movies using .map. However, I keep getting this error message: "This JSX tag's 'children&ap ...

How can Node / Javascript import various modules depending on the intended platform?

Is there a way to specify which modules my app should import based on the target platform in TypeScript? I am interested in importing different implementations of the same interface for a browser and for Node.js. In C++, we have something like: #ifdef wi ...

Flag is activated to retrieve the data from the @Input source

@Input() config= []; flag = false; I need to change the flag to true only when I receive data in the config from the @input. Where should I do this? The data in the config is delayed and I am unable to access it in ngOnInit but can get it in ngOnChanges. ...

Angular ng-bootstrap modal dialog: retrieving closeResult value before proceeding with execution

I've been working on an Angular project using ng-bootstrap (currently version 5), and I've successfully implemented a modal component that can be called from multiple components with unique title and message inputs. However, I'm encounterin ...

Guide to making a sidebar for your chrome extension using Angular, no need for an iframe

I am currently developing a chrome extension using Angular, and it functions similarly to the MaxAI chrome extension. When the user clicks on the widget, it triggers the opening of a sidebar. Although I have followed a few tutorials to create a sidebar, t ...

Error: `__WEBPACK_IMPORTED_MODULE_1_signature_pad__` does not function as a constructor

I recently discovered the angular2-signature-pad library for capturing signatures in my Angular project. I attempted to integrate the library using the following steps: // in .module.ts file import {SignaturePadModule} from "angular2-signature-pad"; @NgMo ...

Changing of expression is detected upon entering but not when clicking

I encountered an issue in my Angular 7 application where pressing the enter key in an input field triggers an error, while clicking on the search button does not: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. ...

What steps do I need to take in order to develop a custom component for FormControls?

Trying to create a form with a custom component for controls, I encountered an issue. Despite including the new component in the parent form that already has a formGroup, Angular throws an error. The error I faced is: Error: formControlName must be use ...

Switching Facebook accounts on Firebase

I'm currently working on an Angular2 App that utilizes Firebase as its User system, with authentication providers including Email + Password, Facebook, and Google. One issue I have encountered is that when logging in with Facebook, I am unable to swi ...

Encounter a net::ERR_EMPTY_RESPONSE error while trying to deploy an Angular application on a production server

I have successfully developed an Angular App on my local machine and now I am facing challenges while trying to deploy it on a Windows production server. I have set up Apache to serve the App along with the Rest Service API. Accessing the App through the ...

The useState variable's set method fails to properly update the state variable

I am currently developing an application with a chat feature. Whenever a new chat comes in from a user, the store updates an array containing all the chats. This array is then passed down to a child component as a prop. The child component runs a useEffect ...

ng-bootstrap's accordion imparts unique style to its child icons

https://i.sstatic.net/YzmtN.png Visible star icon indicates lack of focus on the accordion https://i.sstatic.net/aNW31.png Star disappears when accordion gains focus Below is the CSS code I used to position the star to the left of the accordion: .icon ...

The map() function's splice operation unexpectedly removes only half of the array

I am currently working with an array that contains 146 objects, each object having its own unique id. My goal is to delete any objects from the array that do not have a matching id. I wrote a function to accomplish this task, however, it only works for hal ...