CODEWITHSUNDEEP
angularhtmltypescriptangular5
thedbogh
thedbogh

Reputation: 634

How can I download file using Angular 5?

When I paste my_example_link in a browser the file is automatically downloaded in a proper way. However, when I use source code shown below download doesn't work. I would like to download file after clicking download button. Any ideas what is wrong? I don't get any errors.

user.service.ts:

DownloadFiles() {

    return this.http.get('my_example_link', {responseType: 'text'});

}

uploader.service.ts:

DownloadFile(){

      this.userService.DownloadFiles()
          .subscribe(
              (data) => this.downloadFile2(data)), // console.log(data),
              (error) => console.log("Error downloading the file."),
              () => console.info("OK");
}

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

something.component.html:

<li class="nav-item" *ngIf="isCloud()">
    <a  (click)="this.UploaderService.DownloadFile()" download="file23.txt" style='cursor: pointer;' class="nav-link" target="_blank">
        <i class="nc-icon nc-basket"></i> Download
    </a>
</li>

Upvotes: 5

Views: 29279

Answers (1)

Akj
Akj

Reputation: 7231

Use arraybuffer 

this.httpClient.get(url, {responseType: 'arraybuffer',headers:headers});

To save File:

 npm install file-saver --save

 import { saveAs } from 'file-saver/FileSaver';

component:

downLoadFile(data: any, type: string) {
        var blob = new Blob([data], { type: type.toString() });
        var url = window.URL.createObjectURL(blob);
        saveAs(blob,"file_name.txt");
        window.open(url);

    }

Upvotes: 9

Related Questions