Downloading files with Angular 2 and .Net Core API

Question

I have a WebAPI that has a method which makes an Excel file and returns it using File().

In my Angular app I subscribe to the response and download the file using blob. But I am getting an error in the browser console which says it can't parse the response to a JSON.

Why does it want to parse the response to a JSON? And how to fix this problem?

API Controller:

 [HttpPost]
 public IActionResult QRGenerator(QRCode qrCode)
 {
      string wwwrootPath = _hostingEnvironment.WebRootPath;

       var QrCodes = new List<QRCode>();
       QrCodes.Add(qrCode);
       ExcelGenerator generator = new ExcelGenerator();
       var fileName = generator.GeneratePrintableSheets(QrCodes, wwwrootPath);
       var path = Path.Combine(wwwrootPath, fileName);
       return DownloadFile(fileName, wwwrootPath);   
  }

  public IActionResult DownloadFile(string fileName, string wwwrootPath)
  {
      var path = Path.Combine(wwwrootPath, fileName);
      var content = System.IO.File.ReadAllBytes(path);
      return File(content, "application/vnd.ms-excel", fileName);
   }

Angular Component:

  createQR(qrCode: QRCode) {
    let formData: FormData = new FormData();
    this.singleQr.CreateSingleQR(formData).subscribe(data => {
      this.downloadFile(data);
      console.log(data);
    });
  }

 downloadFile(data: any){
   var blob = new Blob([data], { type: 'application/vnd.ms-excel' });
   var url= window.URL.createObjectURL(blob);
   window.open(url);
 }

And for completion sake the Angular Service:

 CreateSingleQR(formdata: FormData) {
    return this.http.post(this.qrUrl, formdata);
  }

score 2 · Accepted Answer · answered Sep 06 '18 at 02:15

2

You need to tell Angular that the response is not JSON so it will not try to parse it. Try changing your CreateSingleQR code to:

CreateSingleQR(formdata: FormData) {
    return this.http.post(this.qrUrl, formdata, { responseType: ResponseContentType.Blob } );
}

answered Sep 06 '18 at 02:15

Simply Ged

8,250
11
32
40

not sure what version this targets but https://stackoverflow.com/a/49118895/2496266 – Chaim Eliyah Jun 05 '19 at 21:22
note, the correct usage in Angular6+ is responseType: 'blob' – WtFudgE Dec 15 '19 at 02:01

Downloading files with Angular 2 and .Net Core API

1 Answers1