Guide on how to fetch a blob response to download an excel file using Angular

I am trying to download a model in an Excel file using Angular. Below is the code for my service function:

getExcelReport(data: myModel[]): Observable<Blob> {
 let params = new HttpParams()
      .set('myParam', JSON.stringify(data));

return this.Http.get(this.url + '/MyController/GetExcelReport', { params: params, observe: "body", responseType: "blob" });

However, when I call it, I receive an error message: 415 (Unsupported Media Type). Can anyone suggest the correct syntax to use? Thank you.

angulartypescript

Answer №1

Thanks a lot for your assistance, I am only interested in downloading it. After some research, I came across this solution:

getExcelReport(data: myModel[]): void {
    const url: string = this.url  + '/MyController/GetExcelReport';
    this.Http.post(url, data, { responseType: 'blob' })
      .subscribe((response: Blob) => saveAs(response, `report.xlsx`));
  }

Here is the API endpoint:

 [HttpPost] [Route("GetExcelReport")] public async Task<IActionResult> GetExcelReport([FromBody] IList<myModelType> myModel)

This method worked perfectly for me.

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

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Seeking help with the following issue: "Argument of type 'string | undefined' is not assignable to parameter of type" I am unsure how to resolve this error. Here is the section of code where it occurs: export interface IDropDown { l ...

javascriptreactjstypescriptjavascript-objects

Questions about the organization of a MEAN stack project

I'm in the process of developing an application using the MEAN stack, and I have some questions regarding the file structure. I am currently considering three different options: Hosting the Frontend (Angular) on Apache and the REST API on NodeJS, wit ...

node.jsangularservermean-stackdirectory-structure

Conditional validation in Typescript based on the nullability of a field

I have come across the following code snippet: type DomainFieldDefinition<T> = { required?: boolean } type DomainDefinition<F, M> = { fields?: { [K in keyof F]: DomainFieldDefinition<F[K]> }, methods?: { [K in keyof M]: M[K] & ...

typescript

Guide on integrating google play services into a nativescript plugin seed?

I am developing a plugin for NativeScript using the recommended nativescript-plugin-seed available at this link. In my plugin, I require access to the Google Location service, but I am facing issues with accessing it. In order to implement the required de ...

androidtypescriptpluginsgoogle-apinativescript

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

I am utilizing sanity, and if you require more details, I will furnish it promptly. When I try to access http://localhost:3000/api/getComments, I encounter the following error message: ClientError: Unable to process value of "$tweetId=undefined". Kindly ...

javascripttypescriptnext.jssanity

Updating Elements in an Array Using JavaScript is Not Functioning as Expected

In my Angular application, I have included some lines of TypeScript code which involve Boolean variables in the constructor and an array of objects. Each object in this array contains input variables. selftest: boolean; failed: boolean; locoStateItem ...

javascriptarraystypescriptobject

Unlocking the value of the "input" field within an EventListener function in Angular directly from the DOM

In my "characters" module, there is a form with a text field and a button. When the button is clicked, it triggers a function but I am struggling to retrieve the current input text and pass it to the async function. HTML: https://i.sstatic.net/DMF8w.png ...

javascriptangulartypescript

What caused the failure of the ++ operator in production mode?

Encountering an issue with a reducer in my code. There is a button with an onClick function that triggers a NextBox action to alter the state of a React UseContext. The application was built using Vite, and while running npm run dev, everything functions a ...

javascriptreactjstypescriptvite

Accessing Slider Value in Material-UI

I am currently utilizing the Material-UI Slider and I am looking to retrieve the value using the onChange function. This is what my code looks like: const SliderScale: React.FC = () => { const classes = useStyles(); const [inputValue, setInputValue ...

reactjstypescriptmaterial-uislider

Uncaught ReferenceError: cliSystemConfigPackages has not been declared

When diving into Angular 2 programming, I encountered an error message and sought out a solution. After searching for answers, I came across this helpful response: Error: ReferenceError: cliSystemConfigPackages is not defined Unfortunately, none of the s ...

javascriptnode.jsangularnpmzonejs

Sending Object as Payload in a Node.js GET Request

I am encountering a challenge in passing an object from my angular application to my NodeJS server. While I am able to successfully read the object on the client-side, I am facing difficulties in doing so on the server-side. Below is the snippet of my cli ...

node.jsangularhttp

Angular template driven forms fail to bind to model data

In an attempt to connect the model in angular template-driven forms, I have created a model class and utilized it to fill the input field. HTML: <div class="form-group col-md-2 col-12" [class.text-danger]="nameCode.invalid && nameCode.touched ...

javascriptangulartypescript

Ensure that the key and value types in a Typescript Map are strictly specified

Is it feasible to generate a map that consists of key-value pairs, where the key is represented by a string and the value corresponds to an object containing specific properties defined by mapValue? type mapValue { first: string; second: boolean; } Yo ...

reactjstypescript

What is the best way to output data to the console from an observable subscription?

I was working with a simple function that is part of a service and returns an observable containing an object: private someData; getDataStream(): Observable<any> { return Observable.of(this.someData); } I decided to subscribe to this funct ...

angulartypescriptrxjsobservable

Navigating the thorny dilemma of catch-22 situations when dealing with parser

I'm struggling to incorporate @typescript-eslint/no-floating-promises into my ESLint guidelines. This necessitates the use of parserOptions. Below is my .eslintrc.js configuration: module.exports = { root: true, parser: '@typescript-eslint ...

typescripteslinttypescript-eslint

Currently running typescript-json-schema with an undefined root type

Trying to execute the command typescript-json-schema --noExtraProps --required --refs false -o ./types.schema.json ./tsconfig.json * using the typescript-json-schema npm package results in an error: Error: Not supported: root type undefined at JsonSc ...

typescript

Identify and monitor changes in every element within an array using Typescript/Angular 2

I am working with a person array that I have displayed in a Primeng datatable. Each object in the array has fields for first name, last name, and age, which are represented as columns in the table. Additionally, there is a column to display the status of e ...

angulartypescriptprimeng

The specified type of 'Observable<{ } | IProduct[]>' cannot be matched with the type of 'Observable<IProduct[]>'

Currently enrolled in the Angular 6 course by Deborah Kurata I have completed the Observables module, but encountered an error in my products.service. https://i.sstatic.net/zCzI0.png I came across this solution, but I have already tried it and believe i ...

angularrxjsobservableangular6

Change the values of every element in an array

Looking to update the values of every item in an array list? if (country.hostel) { country.hostel.forEach(function (hostel, index) { hostel.room.forEach(function (room, index) { room = {code:{value: BOOKED}}; ...

javascriptnode.jstypescript

Protractor end-to-end tests fail to run properly when the `--spec` flag is utilized

Currently, I am running 'ng e2e' on an Angular CLI project and I am looking to specify a specific test to run instead of running all of them. When I execute ' ng e2e --aot ', the test runs smoothly. However, when I try ' ng e2e ...

angularprotractor