Angular 2 download .CSV file click event with authentication

Question

I'm using a spring boot backend and my api uses a service to send data via an OutputStreamWriter. I can download this in Angular 2 using a click event like so:

Typescript

results(){
window.location.href='myapicall';
}

HTML

<button (click)="results()"
                    class="btn btn-primary">Export</button>

This works just fine; however, I recently implemented security for my api endpoints and now I am receiving a 401 everytime I try to make the call because it's not sending a header.

I wrote a service that I can see the results in the console, but I can't seem to figure out how to download the file.

DownloadFileService

import {Injectable} from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class DownloadFileService {

    headers:Headers;
    bearer: string;
    constructor(public http: Http) {}



    getFile(url:string) {
        this.bearer = 'Bearer '+ localStorage.getItem('currentUser');
        this.headers = new Headers();
        this.headers.append('Authorization', this.bearer);

        return this.http.get(url, {headers: this.headers});
    }



}

I tried downloading the data via a blob as suggested in this post: How do I download a file with Angular2

The file that gets downloaded is of type File and the content is:

Response with status: 200 OK for URL:my url

It doesn't actually download the data.

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



    results(){
        // window.location.href='myapicall';   

         let resultURL =  'myapicall';

        this.downloadfileservice.getFile(resultURL).subscribe(data => this.downloadFile(data)),//console.log(data),
            error => console.log("Error downloading the file."),
            () => console.info("OK");



    }

You can go for this, if u want to create csv file stackoverflow.com/questions/20300547/… — Tejashree
– Tejashree, Commented Oct 12, 2020 at 10:12

shusson · Accepted Answer · 2017-06-23 09:23:55Z

10

Looks like you just need to parse the body of the response i.e

let parsedResponse = data.text();
this.downloadFile(parsedResponse);

Also I would recommend you use FileSaver to download files as even in 2016 there does not seem to be a standard way to do this across browsers.

let blob = new Blob([data], { type: 'text/csv' });
saveAs(blob, "data.txt");

For a more in depth guide check here

edited Jun 23, 2017 at 9:23

answered Dec 5, 2016 at 2:24

shusson

5,79237 silver badges40 bronze badges

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

6 Comments

Bhetzie Over a year ago

That was the problem, thank you! I'm assuming I can probably do a map to text in my service. I will take a look at FileSaver.js, hoping it will fix my problem of saving as type file.

Bhetzie Over a year ago

Do you happen to know what I need to add to my component to recognize the saveAs function? I tried: var FileSaver = require('file-saver'); but doesn't seem to work

shusson Over a year ago

what module loader are you using? I'm using angular-cli which uses webpack. To include 3rd party libs you add the filepath to the lib in angular-cli.json. e.g Add the following `"scripts": ["../node_modules/file-saver/FileSaver.js"],

Bhetzie Over a year ago

I'm using the angular2 seed: github.com/mgechev/angular-seed I added it to my project config and tried adding the typings via npm i @types/file-saver --save

Bhetzie Over a year ago

Actually that worked, my IDE was just throwing an error

|

groenhen · Accepted Answer · 2018-11-25 20:41:55Z

0

I use FileSaver, too. If you have extension on client side, you can see that it will work properly for CSV files. You just need to add extension manually:

FileSaver.saveAs(res, 'export' + extension);

edited Nov 25, 2018 at 20:41

groenhen

3,02725 gold badges51 silver badges69 bronze badges

answered Nov 25, 2018 at 18:25

Mustafa Akgure

251 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular 2 download .CSV file click event with authentication

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related