angulartypescriptangular-fullstack

Angular: Send more than two arguments in HTTP get request

I am working on an application where I want to download a file after clicking on a button on a template. There are many files that are being displayed on the screen and each file has a separate button. I am sending the index number of the array to the Angular which I want to send as params to backend. But, I also want to add a responseType of blob in my arguments and adding both these arguments is giving me an error. Here's my code:

Angular

onDownloadFiles(i: any)
{
this.fileToDownload = i;
console.log(this.fileToDownload);

const params = new HttpParams().set('id3', this.fileToDownload);
this.http.get('http://localhost:3000/downloadfile', {params}, {responseType: "blob"}) //I want to add both these
.pipe(map(responseData => {
  return responseData;
}))
.subscribe(response => {

   this.downloadFile(response, ("application/msword" || "application/vnd.openxmlformats- 
   officedocument.wordprocessingml.document"));

})
}

downloadFile(data: any, type: string)
{
let blob = new Blob([data], {type: type});
let url = window.URL.createObjectURL(blob);
let pwa = window.open(url);

if(!pwa || pwa.closed || typeof pwa.closed == "undefined")
{
  alert("Please disable your pop up blocker and try again.");
}
}

It's giving an error that the http.get method can't take more than two arguments. Is there any other way of sending this to backend?

Solution

  • get method accepts two arguments:

    1. url
    2. options -- which consists of the headers, params, responseType and other fields.

    In your code, you are passing the params and responseType separately. If you combine both of them into single object that works.