Загрузить файл из WebAPI в приложение angular 6

Question

У меня есть веб-приложение на угловом 6 с .NET webApi (.NET 4.5 framework).

То, что я делаю, - это сбор некоторого пользовательского ввода, отправка запроса в webapi.Webapi создает файл 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.');
    }
  }

Answer 1

Ваш тег показывает asp.net-web-api , и вы показываете 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);
}

Answer 2

Angular имеет некоторые странные проблемы с загрузкой файла.С только положенным запросом я не мог загрузить файл.Мне пришлось разбить запрос на две части: 1. поставить запрос на подготовку файла 2. получить запрос на загрузку файла

только с помощью запроса на установку, всегда загруженный поврежденный файл размером 1 КБ.в Angular вам также не нужно использовать какой-либо массив буферов или блоб.Они также вызывают некоторые странные проблемы.

вот код (webapi)

[HttpPut]
        public string Put(Parameters inputs)
        {
            var file = GenerateFile(inputs);
            return Path.GetFileNameWithoutExtension(file);
        }

        [HttpGet]
        public HttpResponseMessage Get(string id) //id is file name returned from above put request
        {
            var result = Request.CreateResponse(HttpStatusCode.OK);
            var fullPath = Path.Combine(Path.GetTempPath(), id + ".xlsx");

            if (!File.Exists(fullPath))
            {
                fullPath = Path.Combine(Path.GetTempPath(), id + ".xlsm");

                if (!File.Exists(fullPath))
                    throw new FileNotFoundException(id);
            }
            var stream = new MemoryStream(File.ReadAllBytes(fullPath));
            result.Content = new StreamContent(stream);

            switch (Path.GetExtension(fullPath))
            {
                case ".xls":
                    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/msexcel");
                    break;
                case ".xlsx":
                    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
                    break;
                case ".xlsm":
                    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.ms-excel.sheet.macroEnabled.12");
                    break;
            }

            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = Path.GetFileName(fullPath)
            };

            return result;
        }

Угловой код:

GenerateReprot() {

    this.http.put(this.webApiURL, this.Input)
      .subscribe(
        result => {
          var url = this.webApiURL + result.json();
          window.open(url)

          alert('file downloaded successfully: ');

        }),
      error => {
        alert('error while downloading file');
      };
  }

Answer 3

Попробуйте responseType: "blob" в вашем HTTP-запросе.

this.http.put(this.webApiURL, this.Input, { responseType: "blob" })
  .subscribe(
...
);