C# 调用WEB API下载excel文件

下面是生成Excel的C#WEB API代码：

public class FileExportController : ApiController
{

    [HttpGet]
    public HttpResponseMessage Get()
    {
        var callerContext = CallerContext.DefaultCallerContext;
        ReportingInput userInput = new ReportingInput();
        userInput.ClientOneCode = "AVON";
        string handle = Guid.NewGuid().ToString();
        var @event = new GetJobReprotDataBlEvent(callerContext, userInput);
        WebApiApplication.ApplicationInitializerObj.EventBus.Publish(@event);
        XLWorkbook wb = new FileExportEngine().ExportExcel(@event.ReportData); //this is returning XLWorkbook
        string fileName = "JobReport_" + DateTime.Now.ToString("yyyy -MM-dd HH':'mm':'ss") + ".xlsx";
        using (MemoryStream memoryStream = new MemoryStream())
        {
            wb.SaveAs(memoryStream);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new ByteArrayContent(memoryStream.ToArray())
            };
            result.Content.Headers.ContentDisposition =
                new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                {
                    FileName = fileName
                };
            result.Content.Headers.ContentType =
                new MediaTypeHeaderValue("application/octet-stream");

            return result;
        }

    }

当我从浏览器调用这个API时，我能够生成excel文件。 --当在浏览器中直接点击时，此选项有效

现在我想在angular 5应用程序中使用这个API。我有一个按钮。单击按钮，我调用组件方法downloadFile（）来下载该文件。 代码如下：

downloadReport() {     
    this._service.downloadJobReport('AVON');
}

其中downloadJobReport（）位于我的服务文件中，如下所示：

downloadJobReport(clientCode: string) {
    return this._http.get(APIs.downloadJobReport);
}

当我运行应用程序并点击下载按钮时，我什么也得不到，我的意思是文件没有下载。任何人都知道，我应该如何更新我的angular代码来使用API

---

提前感谢。

问题是，Angular希望得到JSON。您需要对GET请求进行配置，以便它预期不同的结果

public downloadJobReport(clientCode: string)): Observable<Blob> {   
    return this._http.get(APIs.downloadJobReport, { responseType: 'blob' });
}

public downloadJobReport（clientCode:string））：可观察{
返回此消息。_http.get（api.downloadJobReport，{responseType:'blob'}）；
}

---

只是一个小问题，您将参数clientCode传递给downloadJobReport，但从不使用它。也许明智的做法是忽略这一点？

问题是，Angular希望得到JSON。您需要对GET请求进行配置，以便它预期不同的结果

public downloadJobReport(clientCode: string)): Observable<Blob> {   
    return this._http.get(APIs.downloadJobReport, { responseType: 'blob' });
}

public downloadJobReport（clientCode:string））：可观察{
返回此消息。_http.get（api.downloadJobReport，{responseType:'blob'}）；
}

---

只是一个小问题，您将参数clientCode传递给downloadJobReport，但从不使用它。也许明智的做法是省去它？

正如您在上面的评论中提到的，您正在使用下面的代码下载文件：

 downloadFile(data: Blob) { 
    const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; 
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

由于我也尝试过这段代码，它在chrome浏览器中工作，但在IE和edge中不工作

您可以更新您的方法，如下所示：

var downloadFile=function (file_name, content) {
var csvData = new Blob([content], { type: 'text/csv' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(csvData, file_name);
} else { // for Non-IE (chrome, firefox etc.)
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    var csvUrl = URL.createObjectURL(csvData);
    a.href =  csvUrl;
    a.download = file_name;
    a.click();
    URL.revokeObjectURL(a.href)
    a.remove();
}

})

有关更多信息，请参阅以下链接：

---

正如您在上面的评论中提到的，您正在使用以下角度代码下载文件：

 downloadFile(data: Blob) { 
    const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; 
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

由于我也尝试过这段代码，它在chrome浏览器中工作，但在IE和edge中不工作

您可以更新您的方法，如下所示：

var downloadFile=function (file_name, content) {
var csvData = new Blob([content], { type: 'text/csv' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(csvData, file_name);
} else { // for Non-IE (chrome, firefox etc.)
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    var csvUrl = URL.createObjectURL(csvData);
    a.href =  csvUrl;
    a.download = file_name;
    a.click();
    URL.revokeObjectURL(a.href)
    a.remove();
}

})

有关更多信息，请参阅以下链接：

---

您是否已检查以确保downloadJobReport方法正在执行，以及是否已检查是否正在调用API方法？是否已检查以确保downloadJobReport方法正在执行，以及是否已检查是否正在调用API方法？谢谢@nikneem，我现在可以下载该文件了，我已经更新了您上面提到的服务代码。我还将控制器代码更新为：this._service.downloadJobReport（'AVON'）.subscribe（数据=>this.downloadFile（数据））；其中downloadFile（）为：downloadFile（data:Blob）{const contentType='application/vnd.openxmlformats officedocument.spreadsheetml.sheet'；const Blob=new Blob（[data]，{type:contentType}）；const url=window.url.createObjectURL（Blob）；window.open（url）；}感谢您的回复，你能“接受”这个答案，让人们知道这个答案对你有用吗？您可以通过单击我的答案旁边的复选标记来执行此操作。我正在向downloadJobReport传递参数clientCode，我将在我的API中传递该参数（我将更新API代码）。您知道使用angular（使用ASP.Net WEB API）下载excel的其他方法吗，如果你能分享一些运行在tanks@nikneem的链接/资源，这对我会很有帮助。我现在可以下载该文件了，我已经按照你上面提到的更新了服务代码。我还将控制器代码更新为：this._service.downloadJobReport（'AVON'）.subscribe（数据=>this.downloadFile（数据））；其中downloadFile（）为：downloadFile（data:Blob）{const contentType='application/vnd.openxmlformats officedocument.spreadsheetml.sheet'；const Blob=new Blob（[data]，{type:contentType}）；const url=window.url.createObjectURL（Blob）；window.open（url）；}感谢您的回复，你能“接受”这个答案，让人们知道这个答案对你有用吗？您可以通过单击我的答案旁边的复选标记来执行此操作。我正在将参数clientCode传递给downloadJobReport，我将在我的API中传递该参数（我将更新API代码）。您知道使用angular（使用ASP.Net WEB API）下载excel的其他方法吗？如果您可以共享一些正在工作的链接/资源，这将对我很有帮助