angular 6从API下载excel

我正在尝试从服务器下载excel文件。UI是angular 6，服务是C#Web API。首先，我不知道这个下载方法需要是HTTPGET还是HTTPPOST。使用其他论坛的一些帮助，我编写了以下代码。我没有看到任何错误，也没有看到调试器在subscribe方法中停止。当我点击文件链接从angular应用程序下载时，页面重定向到localhost:port（起始页）

现在，从角度来看：

   downloadFile(fileName: string) {
  this.Service.postAndGetResponse(fileName).subscribe(fileData => {
   // const b: any = new Blob([fileData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    // .map(res => new Blob([res.blob()],{ type: 'application/vnd.ms-excel' }));
   // const  url = window.URL.createObjectURL(b);
   //   window.open(url);
   console.log (fileData);
    }
  );
}

在职教师

     postAndGetResponse(fileName) {
    return this.http.get(this.baseURL + 'DataEvent/DownloadEventAttachment?fileName=' + fileName, {responseType: 'blob' as 'blob'}).pipe(
      map((x) => {
        return x;
    })
    );
  }

我已经将调试器放在subscribe中的downloadFile方法中，但它从未停止过，就好像什么都没有返回或调用丢失一样

当我使用postman调用WebAPI方法时，将返回响应。我没有看到任何文本格式-它似乎已损坏/二进制？？响应体中的格式如下所示：

    ��ࡱ�>��   �����������������

---

我试图复制你的代码。下面的代码正在运行。仅更改postAndGetResponse中的代码以返回http get调用

您可以使用链接或

FileSaver

保存blob内容

postAndGetResponse(fileName) {
    return this.http.get('http://localhost:62292' + '/api/TestExport/DownloadAttachment?fileName=' + fileName, { responseType: 'blob' as 'blob' });
  }

更新下载文件方法

downloadFile(fileName: string) {
    this.settingService.postAndGetResponse(fileName).subscribe(fileData => {

      const blob: any = new Blob([fileData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      let link = document.createElement("a");

      if (link.download !== undefined) {
        let url = URL.createObjectURL(blob);
        link.setAttribute("href", url);
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
    );
  }

和API代码，将谓词更改为

[AcceptVerbs（“GET”）]

---

我发现为某人发帖需要帮助解决同样的问题：

    downloadFile(fileName: string) {
   const isIE = /*@cc_on!@*/false || !!document['documentMode'];
   const isChrome = !!window['chrome'];
    this.service.postAndGetResponse(fileName).subscribe(fileData => {
    const blob: any = new Blob([fileData], { type: 'application/vnd.openxmlformats- 
      officedocument.spreadsheetml.sheet' });
    if (isIE) { // this code doesn't work for chrome
      console.log('Manage IE download>10');
      window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else if (isChrome) {  // this below code doesn't work for IE
    const link = document.createElement('a');
    if (link.download !== undefined) {
     const url = URL.createObjectURL(blob);
     link.setAttribute('href', url);
     link.setAttribute('download', fileName);
     link.setAttribute('target', '_self');
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
    }
  } else {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  }
});
}

---

它很有魅力。非常感谢你救了我一整天，但仍然没有明白创建let link的目的是什么？是否有一种方法也可以获得“打开文档”选项？现在有没有一种方法可以获得“打开文档”选项？这是浏览器设置，您可以更改浏览器的设置创建链接的目的与将链接输入浏览器URL的目的相同另一个问题是，当我单击DownloadFile时，为什么页面从当前组件导航回主组件（即应用程序组件）。此代码没有在IE中打开“保存文件”对话框，尽管它在chrome中工作正常。是否需要更改特定于浏览器的内容？

public class TestExportController : ApiController
    {

        [Route("api/TestExport/DownloadAttachment")]
        [AcceptVerbs("GET")]
        public HttpResponseMessage DownloadAttachment(string fileName)
        {
            //below code locate physical file on server 
            var localFilePath = HttpContext.Current.Server.MapPath("../../uploadFiles/" + fileName);
            HttpResponseMessage response = null;
            if (!File.Exists(localFilePath))
            {
                //if file not found than return response as resource not present 
                response = Request.CreateResponse(HttpStatusCode.Gone);
            }
            else
            {
                //if file present than read file 
                var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);

                //compose response and include file as content in it
                response = new HttpResponseMessage
                {
                    StatusCode = HttpStatusCode.OK,
                    // Content = new StreamContent(fStream)
                    Content = new StreamContent(fStream)
                };

                //set content header of reponse as file attached in reponse
                response.Content.Headers.ContentDisposition =
                new ContentDispositionHeaderValue("attachment")
                {
                    FileName = Path.GetFileName(fStream.Name)
                };
                //set the content header content type as application/octet-stream as it      
                //returning file as reponse 
                response.Content.Headers.ContentType = new
                              MediaTypeHeaderValue("application/octet-stream");


                response.Content.Headers.ContentLength = fStream.Length;
                response.Headers.Add("fileName", fileName);
            }
            return response;
        }
    }

    downloadFile(fileName: string) {
   const isIE = /*@cc_on!@*/false || !!document['documentMode'];
   const isChrome = !!window['chrome'];
    this.service.postAndGetResponse(fileName).subscribe(fileData => {
    const blob: any = new Blob([fileData], { type: 'application/vnd.openxmlformats- 
      officedocument.spreadsheetml.sheet' });
    if (isIE) { // this code doesn't work for chrome
      console.log('Manage IE download>10');
      window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else if (isChrome) {  // this below code doesn't work for IE
    const link = document.createElement('a');
    if (link.download !== undefined) {
     const url = URL.createObjectURL(blob);
     link.setAttribute('href', url);
     link.setAttribute('download', fileName);
     link.setAttribute('target', '_self');
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
    }
  } else {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  }
});
}