Guide on accessing a File with Blob in Angular

Can you help me figure out why I am unable to send the input from my form and download a file at the same time?

  this.fg = this.fb.group({
        rptReqCode:[''],
        rptCode:[''],
        parFldVal:[''],
        genType:[]
    })
  }



downloadFile( filename: string = null): void{

  const token = 'my JWT';
  const headers = new HttpHeaders().set('authorization','Bearer '+token);
  this.http.get(this.appsetting.baseURL + 'File/Download'  ,{headers, responseType: 'blob' as 'json'}).subscribe(
      (response: any) =>{
          let dataType = response.type;
          let binaryData = [];
          binaryData.push(response);
          let downloadLink = document.createElement('a');
          downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
          if (filename)
              downloadLink.setAttribute('download', filename);
          document.body.appendChild(downloadLink);
          downloadLink.click();
      }
)}

Answer №1

Typically, when sending data to the server, POST is used. If you are looking to retrieve something from the server, then you should also consider using POST.

There are a few options available:

One approach is to POST user data first and then utilize switchMap to combine the request with downloading your file through a GET request.

Alternatively, you can send your data via a POST request and in return receive the desired file as a response. This method may require modifications on the backend side.

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

The module 'MatTableModule' could not be located within the '@angular/cdk/table' package during export

Having an issue with using where I'm getting the error message "export 'MatTableModule' was not found in '@angular/cdk/table'. Not sure what I might be doing wrong? You can find more details in my GitHub repository: https://githu ...

Is there a way to automatically start and reload index.js in Node.js when I make changes to my Angular frontend?

I'm feeling a bit lost when it comes to making changes to my package.json file. I attempted to use "watch" in the package.json scripts, but unfortunately, it didn't have the desired effect. I am new to Angular and Nodejs, so any guidance would be ...

A guide for implementing fast-json-patch in your Angular 2 projects

Looking to incorporate the "fast-json-patch" library into my Angular 2 project. This library can be found at https://github.com/Starcounter-Jack/JSON-Patch. I attempted to include the following code: 'fast-json-patch': 'vendor/fast-json-pa ...

Angular Recursive and Nested Reactive Form: Ensuring Continuous Validity, Even in Challenging Situations

Currently, I am in the process of developing a recursive Reactive Form using Angular. You can find the working form on STACKBLITZ HERE The functionality of the form is excellent as expected. However, due to its recursive and dynamic nature, where users ca ...

Create an Angular library that incorporates a TypeScript dependency into the compilation process

Within my Angular lib, residing in an Nx workspace... The lib relies on another local lib for shared TypeScript code. The path to the shared lib is set in the tsconfig paths configuration: "paths": { "@myOrg/sharedLib": ["lib ...

Error in Angular 2+: Internet Explorer 11 fails to retrieve property 'call' due to undefined or null reference

I'm experiencing difficulties with Internet Explorer encountering an issue related to Webpack. My setup includes Angular-CLI 1.7.4 and Angular 5.2.10 which are the most recent versions. The error message I'm facing is as follows: SCRIPT:5007 U ...

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

Angular-Slickgrid experiencing issues with dropdown functionality

I recently downloaded the source code from this link and checked out the demo. However, I noticed that the single select dropdown functionality was missing in the demo. Therefore, I made some modifications to the code specifically for the last row "complet ...

Angular2 and the Use of Environment Variables

I am working on an angular 2/4 app with a node server.js to serve it. I need to access an environment variable for switching between backend endpoints (using localhost for dev and another endpoint for prod). Both the frontend and backend apps are destined ...

I am unable to utilize NavLink unless it is within the confines of the <Router> component

I am currently developing a React application using react-router-dom. To enhance the user experience with smooth transitions, I integrated framer-motion for page animations. However, I encountered an issue where my navbar was being animated and recreated e ...

Issue with Lodash in Angular 2 causing a Typescript error but still functional

While attempting to incorporate lodash into my angular2 project, I encountered an issue. Although it is functioning properly, I am consistently seeing the following error in my log: TS2307 Cannot find module 'lodash'. [error] import * as _ from ...

What steps should I take to incorporate dark mode into my current SCSS and Angular configuration?

I am currently utilizing Angular 13 and SCSS in my project. My goal is to incorporate Dark Mode for the application, here is my existing setup. _variables.scss $body-color: #f0f0f0; :root { --body-color: #{$body-color}; } Throughout the application, i ...

Learn how to set up a class using TypeScript decorators

Is there a way to automatically initialize a class when a specific decorator is present above the class? For example: @apiController export class usersControllers extends lib.baseClasses.apiControllerBase().apiController { @lib.decorators.routesRegist ...

Passing a retrieved parameter from the URL into a nested component in Angular

I'm currently facing an issue where I am trying to extract a value from the URL and inject it into a child component. While I can successfully retrieve the parameter from the URL and update my DOM with a property, the behavior changes when I attempt t ...

Trigger a function upon a user's departure from a page or route in Angular 2

Is there a way to trigger a function only when the current route changes away from a specific component, such as when navigating away from "..../user/user-details"? I want this method to execute regardless of whether the route is changed through user inter ...

Testing vue-router's useRoute() function in Jest tests on Vue 3

Struggling with creating unit tests using Jest for Vue 3 components that utilize useRoute()? Take a look at the code snippet below: <template> <div :class="{ 'grey-background': !isHomeView }" /> </template> &l ...

Can you guide me on how to access a transacted file in C# on Windows 7 operating system

Can you explain how to implement transacted files in C# on a Windows 7 operating system? ...

How different is Angular Version 15 compared to Version 12 with missing files?

Currently, I am watching a tutorial on Angular 12.2.5 and attempting to follow along using the latest version 15.0.4. Unfortunately, I have noticed that I am missing several files and folders that the tutorial instructor has, such as the entire environmen ...

Various types of generics within an object

Is there a way to achieve different types for the nested K type within a type like MyType? Here's an example: type Config<K> = { value: K; onUpdate: (value: K) => void; } type MyType<F extends string> = { [K in F]: <V>() =& ...

Is it possible to apply async/await within a describe block?

I have been struggling to run the following complete end-to-end test for my project. I have a collection of pages, each consisting of a page title and a list of steps required. However, in order to retrieve these pages, an asynchronous call is necessary. C ...