How can I download file using Angular 5?

Question

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>

the easiest way to get a file to download is to use the download attribute provided natively by most modern browsers shown here: w3schools.com/tags/att_a_download.asp ... if you absolutely must do it via xhr, then the easiest way is to set the correct response headers on the server. Otherwise you'll run into some head aches. — bryan60
– bryan60, Commented Aug 21, 2018 at 15:46
@bryan60 the problem is that I download this file from hadoop through backend using HttpResponseRedirect, so I need to send data for instance in blob and then save it in local system of the user. — thedbogh
– thedbogh, Commented Aug 21, 2018 at 15:48

Akj · Accepted Answer · 2019-08-22 08:44:23Z

9

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);

    }

edited Aug 22, 2019 at 8:44

answered Aug 21, 2018 at 15:48

Akj

7,2513 gold badges31 silver badges41 bronze badges

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

6 Comments

thedbogh Over a year ago

Is it possible to save file which was converted to blob with his original name? At the moment I save file with name unknown.

thedbogh Over a year ago

Forgive me if I didn't define it clearly enough. I meant whether it is possible to download file using blob with his filename? In the example above we add the name of the file manually. I wonder whether it is possible to do this automatically using blob. Or blob only contains information about file without his name?

Akj Over a year ago

i meant to say if you are getting response as file with original name you can save

Akj Over a year ago

you need to create an object which consist filedata, filename, filetype etc. send that object from api.

Adnan Rafique Over a year ago

In case someone get error "cannot find module 'file-saver/FileSaver'", FileSaver was lying in the dist folder in file-saver. So the path will be "import { saveAs } from 'file-saver/dist/FileSaver'"

|

Collectives™ on Stack Overflow

How can I download file using Angular 5?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related