javascript - 将 zip 文件返回到 angularjs 进行下载

Question

我有以下 angularjs 代码:

$scope.search = function() {
    creatorService.search($scope.model).then(function(data) {
        saveAs(new Blob([data], { type: "application/octet-stream'" }), 'testfile.zip');
    });
};

(也使用 fileSaver.js )

然后在我的 webapi2 端使用以下方法:

public HttpResponseMessage Post(Object parameters)
    {
        var streamContent = new PushStreamContent((outputStream, httpContext, transportContent) =>
           {
               try
               {
                   using (var zip = new ZipFile())
                   {
                       zip.AddEntry("test.txt", "test data");
                       zip.Save(outputStream);
                   }
               }
               finally
               {
                   outputStream.Close();
               }
           });
        streamContent.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
        streamContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "test.zip"
        };

        var response = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = streamContent
        };

        return response;
    }

我从 this post 得到了很多这样的信息，并且它使用 ZipFile。

一切似乎都很完美，除了当我下载 zip 文件时，我无法打开它 - 它是无效的。它具有正确的大小，并且似乎具有正确的内容，但我就是无法打开它。

我可以验证 AngularJS 代码是否正确命中 Post()、是否正在传递参数(如果有的话)以及是否正在执行 Post() 以及返回没有错误。然后返回的内容由 fileSaver 正确处理，我可以保存生成的 zip 文件。

我这样做是不是方法不对，或者我做错了什么？

Answer 1

我正在重新发布我的评论(因为这是解决方案):

如果您直接调用(不使用任何 JavaScript 代码)您的服务，您是否会获得有效的 zip 文件？我怀疑 ajax 调用损坏了你的文件。你的js代码中的数据类型是什么？

如果这是一个字符串，则您的浏览器可能正在应用 utf8 转换(损坏您的文件)。在这种情况下，您可以在执行 ajax 请求时使用 xhr.responseType = "arraybuffer";

请求 ArrayBuffer