使用Angular 2和.Net Core API下载文件

Question

我有一个WebAPI，该API的方法可以制作一个Excel文件，并使用File()将其返回。

在我的Angular应用程序中，我订阅了响应并使用blob下载文件。但是我在浏览器控制台中遇到一个错误，该错误称它无法解析对JSON的响应。

为什么要解析对JSON的响应？以及如何解决这个问题？

API控制器：

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

角度组件：

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

为了完整起见，Angular Service：

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

Answer 1

您需要告诉Angular响应不是JSON，因此它不会尝试解析它。尝试将您的CreateSingleQR代码更改为：

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