Question

下面是生成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文件。 http://localhost/ETLScheduler/api/FileExport-在浏览器中直接点击时可以使用

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

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

在我的服务文件中，其中downloadJobReport（）如下：

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

当我运行该应用程序并单击“下载”按钮时，我什么也没收到，这意味着文件未下载。任何人都可以知道，我应该如何更新我的角度代码以使用该API。

谢谢。

Answer 1

问题是，Angular需要JSON作为结果。您需要配置GET请求，以便它期望有所不同。

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

一个小问题，您将参数clientCode传递给downloadJobReport，但从不使用它。也许把它排除在外吧？

Answer 2

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

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

};

您可以参考下面的链接以获取更多信息：

Open links made by createObjectURL in IE11

调用WEB API下载Excel文件

2 个答案: