时间戳

首页 > 解决方案 > 将文件从 WebAPI 下载到 Angular 6 应用程序

angular - 将文件从 WebAPI 下载到 Angular 6 应用程序

问题描述

我有带有 .NET webApi（.NET 4.5 框架）的 Angular 6 的 Web 应用程序。

我正在做的是收集一些用户输入，向 webapi 发送请求。Webapi 使用来自 db 的一些数据生成一个 excel 文件（xlsx 或 xlsm）。现在我需要在用户机器上下载这个文件。我已经在服务器上验证过，生成的文件是正确的，并在服务器上的临时目录中创建。但它在用户计算机上下载为损坏的文件，Excel 无法打开它。

知道如何解决这个问题。

WebApi 代码

[System.Web.Http.HttpPut]
        public ActionResult Put(Parameters inputs)
        {
            var path = GenerateFile(inputs);
            string extension = new FileInfo(path).Extension;
            switch (extension)
            {
               case ".xls":
                    return new FilePathResult(path, "application/msexcel");
                case ".xlsx":
                    return new FilePathResult(path, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
                case ".xlsm":
                    return new FilePathResult(path, "application/vnd.ms-excel.sheet.macroEnabled.12");

            }
        }

角代码：

GenerateReprot() {
    this.http.put(this.webApiURL, this.Input, 'arraybuffer')
      .subscribe(
        result => {
          this.downLoadFile(result, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
          alert('file downloaded successfully. ');
        },
        error => {
          alert('error with downloading file.');
        }
      );
  }

    downLoadFile(data: any, type: string) {
    var blob = new Blob([data], { type: type });
    var url = window.URL.createObjectURL(blob);

    var pwa = window.open(url);
    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
      alert('Please disable your Pop-up blocker and try again.');
    }
  }

标签： angularasp.net-web-apiangular6

解决方案

您的标签显示并且您显示System.Web.Http命名空间，但该框架没有ActionResult使用。所以看起来你正在混合 MVC 和 Web API 之间的框架

您很可能返回了错误的模型类型，并且它被序列化为 JSON，这就是文件阅读器认为它们已损坏的原因。

以下假设它是在一个ApiController

[HttpPut]
public IHttpActionResult Put(Parameters inputs) {
    var path = GenerateFile(inputs);
    var file = new FileInfo(path);
    string contentType = null;
    switch (file.Extension) {
        case ".xls":
            contentType = "application/msexcel";
        case ".xlsx":
            contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        case ".xlsm":
            contentType = "application/vnd.ms-excel.sheet.macroEnabled.12";
    }

    var stream = file.OpenRead();

    var content = new StreamContent(stream);
    content.Headers.ContentLength = stream.Length; 
    content.Headers.ContentType = new MediaTypeHeaderValue(contentType);
    content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") {
        FileName = file.Name
    };

    var response = Request.CreateResponse(HttpStatusCode.OK);
    response.Content = content;
    return ResponseMessage(response);
}

推荐阅读