Angular - Retrieve Excel file with its current filename

Question

Angular - Retrieve Excel file with its current filename

Is there a way for me to save an Excel file with its original filename from a service in my Angular app using the file-saver library? Below is my current code:

let blob = new Blob([response],  {type: 'application/vnd.openxmlformat-officedocument.spreadsheetml.sheet;'});
saveAs(blob, 'hello.xlsx');

This is how the response looks like from the Angular service:

return this.http.get(`${this.reportsUrl}`, { responseType: 'blob'});

Here is the response from my backend service (Spring MVC). The excelCreateResource is of type

org.springframework.core.io.Resource

:

return ResponseEntity.ok()
                .contentType(MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"))
                .header(HttpHeaders.CONTENT_DISPOSITION,
                "attachment; filename=\"" + excelCreateResource.getFilename() + "\"")
                .body(excelCreateResource);

I want to download the file with its original filename without specifying hello.xlsx. When accessing the URL directly from the browser, I am able to download the Excel file successfully.

angular typescript

Answer 1

Answer №1

If you want to extract header details from a complete response in Angular, you can achieve this by observing the response thoroughly. Utilize the following code snippet:

let response$ = this.http.get(`${this.reportsUrl}`, { observe: 'response'});
response$.subscribe(response => {
  let data = response.body; // This data will be your blob object (the body of the response)
  let headers = response.Headers // The headers can be found in this dictionary or HashMap

//.....

})

Answer 2

If you want to extract header details from a complete response in Angular, you can achieve this by observing the response thoroughly. Utilize the following code snippet:

let response$ = this.http.get(`${this.reportsUrl}`, { observe: 'response'});
response$.subscribe(response => {
  let data = response.body; // This data will be your blob object (the body of the response)
  let headers = response.Headers // The headers can be found in this dictionary or HashMap

//.....

})

Answer 3

Answer №2

Should the function

excelCreateResource.getFilename();

provide a filename as output, you have the option to save this filename in a local variable and then use it as an argument in the saveAs() method, as demonstrated below:

var fileTitle = excelCreateResource.getFilename();
saveAs(blob, fileTitle);

This approach may be successful for your situation.

Answer 4

Should the function

excelCreateResource.getFilename();

provide a filename as output, you have the option to save this filename in a local variable and then use it as an argument in the saveAs() method, as demonstrated below:

var fileTitle = excelCreateResource.getFilename();
saveAs(blob, fileTitle);

This approach may be successful for your situation.

Answer 5

Answer №3

Utilizing the FileSaverJs library

let excelOutput = <write output> // write table or json to excel
function stringToArrayBuffer(s) {
  var buffer = new ArrayBuffer(s.length);
  var view = new Uint8Array(buffer);
  for (var i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buffer;
}
// Save the file as test.xlsx
saveAs(new Blob([stringToArrayBuffer(excelOutput)], {type: "application/octet-stream"}), 'hello.xlsx');

Answer 6

Utilizing the FileSaverJs library

let excelOutput = <write output> // write table or json to excel
function stringToArrayBuffer(s) {
  var buffer = new ArrayBuffer(s.length);
  var view = new Uint8Array(buffer);
  for (var i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buffer;
}
// Save the file as test.xlsx
saveAs(new Blob([stringToArrayBuffer(excelOutput)], {type: "application/octet-stream"}), 'hello.xlsx');

Answer 7

Answer №4

One way to save a File constructor is by not specifying a filename, as the File itself already has a name.

let content = new Blob([data],  {type: 'application/vnd.openxmlformatofficedocument.spreadsheetml.sheet;'});
downloadFile(content);

Alternatively, you can extract the headers from your response, store the filename in a variable, and then provide that variable to the downloadFile() function.

Answer 8

One way to save a File constructor is by not specifying a filename, as the File itself already has a name.

let content = new Blob([data],  {type: 'application/vnd.openxmlformatofficedocument.spreadsheetml.sheet;'});
downloadFile(content);

Alternatively, you can extract the headers from your response, store the filename in a variable, and then provide that variable to the downloadFile() function.

Angular - Retrieve Excel file with its current filename

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular files not being delivered by Express server

Searching through all values can be done by following these steps

Is it feasible to utilize mat-selection-list with an object instead?

How can a TypeScript Angular directive utilize a function?

Uploading files into an array using Angular 2

Angular UI and Node backend causing CORS issues

When using Angular server-side pagination with ngrx and Express in Node.js, I often encounter discrepancies in the indexing across different stacks

What could be causing the error I encounter when attempting to send JSON in a GET request?

The type is lacking the following properties in array.push

Arranging an array of objects based on a specific keyword and its corresponding value

How can I combine my two ngIf conditions into an ngIf else statement?

Issue: Unable to link with 'dataSource' as it is not a recognized feature of 'mat-tree'

Combining numerous interfaces into a unified interface in Typescript

Issue with refreshing causing Firebase Hosting (utilizing Angular 8 and Service Worker) to not update

Implementing asynchronous data sharing within an Angular 2 service

Creating a custom React hook in TypeScript to handle mouse events

Angular rxjs Distinctions

Creating a customized Angular Material 2 component that utilizes the NG Value Accessor feature

Error encountered when attempting to import Angular Version 9.1.4: TS2314 error code

Utilizing generics with Swagger in NestJS