Question

我有一个服务功能，它返回3个结果文件（2个文本文件，1个zip文件）。

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

我的控制器解决了我服务的承诺。如果我下载文本文件 - ＆gt;文件说[object object] ..

我在浏览器中看到响应正文来自content-type：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);
        })
    };

服务：

.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;

视图：

<span ng-show="dataTable">
    <table>
        <tr ng-repeat="r in results">
            <td><a href="" ng-click="getResult(r.id)" download>{{r.name}}</a></td>
        </tr>
    </table>
</span>

更新

这是我的服务，我将responsetype设置为arraybuffer

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

    var service = {};
    service.getZip = function(id, rId) {

        var deferred = $q.defer();

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

这是我在控制器中的电话：

$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文件，它仍然会损坏并且在解压缩时会出错 - ---

Answer 1

如何在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;
    ...
  });

有关详细信息，请参阅MDN Web API Reference - XHR responseType。

Answer 2

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

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或其他东西在这里建立它）。在这种情况下，后端在公开的标题中提供完整的文件名，因此您可以提取它并使用正确的名称和格式保存文件。此示例中的提取是针对特定的休息响应，但您应该能够根据自己的需要进行更改。

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

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

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

如何在AngularJS / FilesaverJS

2 个答案:

如何在AngularJS中下载zip文件