Download File in Angular4 using file-saver

Question

I am trying to implement download file functionality in my angular 4 app. My api returns base 64 string of the file which I download from SharePoint. I am using file-saver module to get the file downloaded. Below is the code used.

let byteArray = new Uint8Array(res.data)
 , blob = new Blob([byteArray], {type: 'application/pdf'});
 saveAs(blob, "test.pdf");

res.data is the base64 string of file. The file gets downloaded, however, could not be opened. The error message is "file is corrupted or damaged". Text file gets downloaded and can be opened but is alway blank with no content. Am I doing something wrong.

Turns out I was converting base64 to blob in an incorrect way. This link helped me. — Ravi Kukreja
– Ravi Kukreja, Commented Mar 15, 2018 at 17:38

Naoe · Accepted Answer · 2018-03-08 09:52:38Z

3

It's hard to know what is wrong without being able to test the actual request/response.

I would try to log the different objects and analyse the output, maybe cast the response directly to new Blob, and see what happens.

Another tips might be to test without using file-saver. Maybe something like this:

downloadFile(data: Response){
  var blob = new Blob([data], { type: 'application/pdf' });
  var url= window.URL.createObjectURL(blob);
  window.open(url);
}

Source: How do I download a file with Angular2

answered Mar 8, 2018 at 9:52

Naoe

1,2198 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adnan Rafique Over a year ago

I am following your answer and I am not able to understand it's behaviour. Sometimes it downloads the file and mostly it does not.

Sachin from Pune · Accepted Answer · 2018-12-20 12:48:36Z

2

For Angular 6 +

1 - Install dependencies for show save/open file pop-up

npm install file-saver --save
npm install @types/file-saver --save

2- Create a service with this function to recive the data

import { RequestOptions, ResponseContentType, Http } from '@angular/http';
import { map } from 'rxjs/operators';
    constructor(private http: Http) { }

    downloadFile(id): Observable<Blob> {
        let options = new RequestOptions({responseType: ResponseContentType.Blob });
        return this.http.get(this.baseUrl + `coursepurchased/receipt/` + bookingId, options)
        .pipe(map(res => res.blob()))
    }

3- In the component parse the blob with 'file-saver'

import {saveAs as importedSaveAs} from "file-saver";

 getCourseReceipt(bookingId) {
    this.studentInfoService.getCourseInvoice(bookingId).subscribe(
      blob => {
        var fileName = 'test.pdf';
        importedSaveAs(blob, fileName)
      },
      error => {
        console.log(error);
        this.alertService.showAlert(error.message, "error");
      }
    );
  }

This works for me!

answered Dec 20, 2018 at 12:48

Sachin from Pune

7369 silver badges21 bronze badges

1 Comment

Andre Aus B Over a year ago

i tryed it the same way and get the following build error: BUILD ERROR 'saveAs' is not exported by node_modules/file-saver/dist/FileSaver.min.js

Ravi Kukreja · Accepted Answer · 2018-03-15 17:40:33Z

1

Turns out I was converting base64 to blob in an incorrect way. This base64 to blob helped me.

answered Mar 15, 2018 at 17:40

Ravi Kukreja

6471 gold badge8 silver badges18 bronze badges

Comments

Klemen Fajs · Accepted Answer · 2018-03-08 10:21:00Z

Call the function in the component like so:

 getPdf(form) {
   this.formService.getFormPdf(form.id).subscribe(data => {
     saveAs(data, form.name + '_' + form.surname + '.pdf');
     this.toastr.toastrSuccess.next('PDF fetched');
   });
 }

then implement in http service like so:

  getFormPdf(formNumber): Observable<any> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Token ' + localStorage.getItem('token'));
    return this.http.get(this.PDFForm + formNumber, { headers: headers, responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' });
        });
}

Collectives™ on Stack Overflow

Download File in Angular4 using file-saver

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related