NET Core 2 | Angular 2 | Downloading Files

Question

I am trying to download a file using angular 2 and net core 2 as the API.

When user clicks the download link, they should be able to save file in their local machine.

Every answer I've previously looked at varies a lot, and I can't seem to understand/ get them to work.

Anyway, this is what I've got the server, I return a file stream

  var content = System.IO.File.ReadAllBytes(tempFilename);
  var contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  var fileName = "test.xlsx";

  return File(content, contentType, fileName);

The stream is returned fine. It is now my understanding I have to create a blob on the client? And then read and save the blob or something?

Currently, on my client all I have a get request returning an observable.

Here is my component call to my service:

    this.reportService.generateDispensations(this.config).subscribe(data => {

    });

I am not really sure what to modify in the actual http call, to turn it into a blob or something

Looking at your problem I think the solution posted [here (How do I download a file with Angular2)](https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2) will help. — olavelek, Feb 22 '18 at 13:22

score 0 · Answer 1 · answered Feb 22 '18 at 14:21

0

for a quick fix, if your file does not require authentication, you can just do it this way

const url = `${environment.apiUrl}/location/to/download/from`
window.location.href = url;

answered Feb 22 '18 at 14:21

Obed Amoasi

1,837
19
27

Ashutosh Kushawaha · Answer 2 · 2019-11-13T10:25:20.167

suppose you have data file in some folder name like "image" folder which is in wwwroot folder. suppose you have file name abc.jpg in image folder. To get this file, write below code to your html component.

<a href="https://localhost:8438/image/abc.jpg" target="_blank" ><i class="fa fa-download"></i></a>

remove base url with your.

Or you can use below method in component.ts , fileNameUrl is the full url of image.

DownLoadFilesUrl(fileNameUrl: any) {
        debugger;
        var filename: string[] = fileNameUrl.split('\\');
        this.getBlobFile(fileNameUrl).subscribe((data: Blob) => {
            debugger;
            let item = filename[filename.length - 1];

            let checkFileType = item.split('.').pop();
            var fileType: any;
            if (checkFileType == "txt") {
                fileType = "text/plain";
            }
            if (checkFileType == "pdf") {
                fileType = "application/pdf";
            }
            if (checkFileType == "doc") {
                fileType = "application/vnd.ms-word";
            }
            if (checkFileType == "docx") {
                fileType = "application/vnd.ms-word";
            }
            if (checkFileType == "xls") {
                fileType = "application/vnd.ms-excel";
            }
            if (checkFileType == "xlsx") {
                fileType = "application/vnd.ms-excel";
            }
            if (checkFileType == "png") {
                fileType = "image/png";
            }
            if (checkFileType == "jpg") {
                fileType = "image/jpeg";
            }
            if (checkFileType == "jpeg") {
                fileType = "image/jpeg";
            }
            if (checkFileType == "gif") {
                fileType = "image/gif";
            }
            if (checkFileType == "csv") {
                fileType = "text/csv";
            }
            if (checkFileType == "amr") {
                fileType = "AMR-WB";
            }
            var blob = new Blob([data], { type: fileType })
            const blob1: Blob = data;
            const fileName1: string = item;
            const objectUrl: string = URL.createObjectURL(blob);
            const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;

            a.href = objectUrl;
            a.download = fileName1;
            document.body.appendChild(a);
            a.click();

            document.body.removeChild(a);
            URL.revokeObjectURL(objectUrl);

        });
    }



   getBlobFile(imageUrl: string): Observable<Blob> {
        return this._http.get(imageUrl, { responseType: 'blob' });
    }

NET Core 2 | Angular 2 | Downloading Files

2 Answers2