使用AngularJS从ASP ApiController下载zip文件有什么问题？

问题描述

我正在尝试执行以下操作：

I'm trying to do the following:

1. 用户填写表单并将其发送到.JSON到服务器
2. 
   
3. 使用表单，服务器生成一些.CSV文件，并将它们全部放在.ZIP文件中。


4. 服务器发送.ZIP文件和用户下载它。

经过一些研究，我写了这段代码：

After some research I have wrote this code:

我的控制器：

[HttpPost]
        [Route("routeToMyAPI")]
        public HttpResponseMessage Process(Form form)
        {
            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(<streamToMyGeneratedZipFile>)
            };

            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = "fileName.zip"
            };

            return result;
        }

我的服务：

angular.module('app')
  .factory('MyService', function ($http) {
    return {
      Process: function (form) {
        var req = $http.post('rest/example/process', form);
        return req;
      }
    };
  });

我的控制器：

this.submit = function () {
    var Form = {};

    var formPost = MyService.Process(Form);
    formPost.then(function (data) {
      var a = document.createElement('a');
      var blob = new Blob([data], { 'type': "application/octet-stream" });
      a.href = URL.createObjectURL(blob);
      a.download = "fileName.zip";
      a.click();
    }, function (error) {
      alert('An error occured !');
    });
  };

我有零件1& 2工作，但我没有找到调用我的ASP API来下载.ZIP文件的方式。

I have parts 1 & 2 working, but I don't have find the way to call my ASP API to download the .ZIP file.

当我调用我的控制器的提交方法时，我有一个fileName.zip谁下载在我的电脑，但是当我尝试打开W​​indows对我说，这不是一个有效的档案。

When I call the submit method of my Controller, I have a fileName.zip who is downloaded on my PC but when I try to open it Windows says to me that it's not a valid archive.

我做错了什么？我是一个菜鸟在角度和ASP，所以任何帮助将受到欢迎。

What did I do wrong ? I'm a rookie in angularjs and ASP so any help will be welcomed.

提前感谢

推荐答案

您的代码有几个问题：

之后 ZipArchive 流的位置将在最后。所以你必须在发送之前将其重置为这样的开始：

After ZipArchive does its work, the position of the stream will be at the end. So you must reset it to the beginning like this before sending it:

zipStream.Position = 0;

由于您已经在服务器上设置文件的内容类型和文件名，只需解析它在客户端。

Since you're setting the content type and file name of the file on the server already, just parse it on the client side.

var headers = data.headers(); //$http resolves to data, status, headers, config
var regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var match = regex.exec(headers["content-disposition"]);
var fileName = match[1] || "myZipFile.zip";
fileName = fileName.replace(/\"/g, ""); //replace trailing and leading slashes

var contentType = headers["content-type"] || "application/octet-stream";

IE不会允许您直接打开blob。您必须使用 msSaveOrOpenBlob 或 msSaveBlob 。

IE will not allow you to open blobs directly. You must use msSaveOrOpenBlob or msSaveBlob.

var blob = new Blob([data.data], { type: contentType });

  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else {
    var a = document.createElement('a');
    var objectUrl = URL.createObjectURL(blob);
    a.href = URL.createObjectURL(blob);
    a.download = match[1];
    a.click();
  }

最后一件事：以前的代码不会在Firefox上工作，因为firefox不不支持 clic（）。感谢，这可以通过添加这个小代码片段来解决代码：

One last thing: the previous code won't work on firefox because firefox doesn't support clic(). Thanks to this thread this can be solved by adding this little snippet of code:

HTMLElement.prototype.click = function() {
   var evt = this.ownerDocument.createEvent('MouseEvents');
   evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
   this.dispatchEvent(evt);
} 

这篇关于使用AngularJS从ASP ApiController下载zip文件有什么问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！