Javascript 如何在AngularJS/FilesaverJS中下载zip文件

我有一个服务函数，返回我3个结果文件（2个文本文件，1个zip文件）

我想检查响应的标题，看看文件是zip还是文本，以设置下载文件的正确配置

我的控制员解决了我的服务承诺。如果我下载一个文本文件->文件上写着[object]

我在浏览器中看到，响应主体来自内容类型：text/plain

我有点困惑：/

控制器：

$scope.getResult = function(rid) {
        console.log($scope.id);
        GetResultFile.getResult($scope.id, rid)
        .then(function (data, headers) {
            //console.log(headers(Content-type));
            console.log("Download erfolgreich");
            console.log(data.status);
            var file = new Blob([data], {type: 'text/plain;charset=utf-8'});
            FileSaver.saveAs(file, 'test.txt');

        }, function (data) {
            console.log("Download ERROR!");
            console.log(data.status);
        })
    };      

$scope.getResult = function(rId, rName) {
        console.log($scope.id);
        console.log(rName);
        GetResultFile.getResult($scope.id, rId)
        .then(function(response) {
            var data = "";
            var headerType = "";
            data = response.data;
            headerType = response.headers('content-type');
            console.log(response.headers('content-type'));
            console.log("Download erfolgreich");
            console.log(response);
            // zip data need to be handle with a binary stream
            if(headerType == 'application/zip;charset=UTF-8') {
                GetZip.getZip($scope.id, rId)
                .then(function(response) {
                    var file = new Blob([response.data], {type: "application/octet-stream"});
                    FileSaver.saveAs(file, rName);
                    console.log("zipper");
                }, function(response) {
                    console.log("Download ERROR");
                    console.log(response.status);
                })
            } else {
                var file = new Blob([data], {type: headerType});
                FileSaver.saveAs(file, rName);
                console.log("else");
            }
        }, function(response) {
            console.log("Download ERROR!");
            console.log(response.status);
        })
    };              

服务：

.factory('GetResultFile',
['$http', '$q',
function ($http, $q) {

    var service = {};
    service.getResult = function(id, rid) {

        var deferred = $q.defer();

        $http
        .get('http://localhost:9999/v1/jmeter/' + id + '/results/' + rid, {cache: false})
        .then(function(data, status, headers, config) {
            if(data.status == 200) {
                console.log(data.status);
                deferred.resolve(data);
            }
            else {
                deferred.reject(data);
            }
        });
        return deferred.promise;                
    }
    return service;

视图：

这是我的呼叫控制器：

$scope.getResult = function(rid) {
        console.log($scope.id);
        GetResultFile.getResult($scope.id, rid)
        .then(function (data, headers) {
            //console.log(headers(Content-type));
            console.log("Download erfolgreich");
            console.log(data.status);
            var file = new Blob([data], {type: 'text/plain;charset=utf-8'});
            FileSaver.saveAs(file, 'test.txt');

        }, function (data) {
            console.log("Download ERROR!");
            console.log(data.status);
        })
    };      

$scope.getResult = function(rId, rName) {
        console.log($scope.id);
        console.log(rName);
        GetResultFile.getResult($scope.id, rId)
        .then(function(response) {
            var data = "";
            var headerType = "";
            data = response.data;
            headerType = response.headers('content-type');
            console.log(response.headers('content-type'));
            console.log("Download erfolgreich");
            console.log(response);
            // zip data need to be handle with a binary stream
            if(headerType == 'application/zip;charset=UTF-8') {
                GetZip.getZip($scope.id, rId)
                .then(function(response) {
                    var file = new Blob([response.data], {type: "application/octet-stream"});
                    FileSaver.saveAs(file, rName);
                    console.log("zipper");
                }, function(response) {
                    console.log("Download ERROR");
                    console.log(response.status);
                })
            } else {
                var file = new Blob([data], {type: headerType});
                FileSaver.saveAs(file, rName);
                console.log("else");
            }
        }, function(response) {
            console.log("Download ERROR!");
            console.log(response.status);
        })
    };              

}])

但是如果我下载zip文件，它仍然会损坏并且在解压缩zip时出错-。-

如何在AngularJS中下载zip文件 要下载二进制文件类型（如zip文件），在执行XHR之前设置

responseType

非常重要

var config = { responseType: "blob" };

var promise = $http.get(url, config);

promise
  .then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }).catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

---

有关更多信息，请参见。

为此，您应该在后端有两个独立的rest服务，因此，您不应该同时为所有文件提供服务并将它们保存在浏览器中，而应该从一个rest端点检索可用文件的列表，然后在用户单击从另一个rest端点检索特定文件时。您的文件服务可能如下所示：

function downloadFile(src) {
  let header, startIndex, filename;
  $http({
    method: 'GET',
    url: src,
    headers: {
      'Accept': 'text/html,application/xhtml+xml,application/xml,application/pdf;q=0.9,image/webp,*/*;q=0.8',
      'Upgrade-Insecure-Requests': 1
    },
    responseType: 'blob'
  }).then(function (successResponse) {
    header = unescape(successResponse.headers()['content-disposition']);
    startIndex = header.indexOf('filename=');
    filename = header.slice(startIndex + 10,-1);
    try{
      saveAs(successResponse.data, filename);
    }
    catch(error){
      // FileSaver error
    }
  }, function (errorResponse) {
    // Server error has occurred during file downloading.
}

您需要将响应类型指定为blob。本例中的变量src是服务于所需文件的特定endpoind（在这里，它是基于从可用文件列表检索的数据从控制器提供的，但如果您想要基于文件的id或其他内容，您可以在这里构建它）。在这种情况下，后端在公开的头文件中提供完整的文件名，所以您可以提取它，并用它的正确名称和格式保存文件。本例中的提取用于特定的rest响应，但您应该能够更改它以满足您的需要

示例：内容处置标头将是字符串，类似于：

Content-Disposition: attachment; filename="picture.png"

---

在这种情况下，服务将提取该名称，Filesaver将保存文件“picture.png”。

那么当前的实际问题是什么？标题提到了zip文件，但你问的是问题中的文本文件。你能展开一下吗？

。文件上写着[object object]

？对不起，文本文件和zip文件，我会编辑它。你能检查我对这个问题的更新吗？仍然不工作…@Kai在您的控制器中，var文件=。。。。什么是数据？您对response不做任何操作，它应该类似于response.data。还要确保rName是文件的正确名称，我目前不确定您从何处获得它。data=response.data和rName是视图中的文件名，名称正确，数据看起来不错，但是如果我解压缩数据，出现了一个错误--好的，我已经修好了！谢谢你的帮助你能检查我的问题更新吗，还是一个错误