在AngularJS中下载zip文件

时间:2014-11-05 21:08:57

标签: angularjs download

尝试在AngularJS中下载zip文件我查看AngularJS: download pdf file from the server并将控制器编码为:

  RolloutService.export(rollout.id, function(data, status, headers) {
    var headers = headers();
    var filename = headers['download-filename'] || 'file';
    var octetStreamMime = 'application/octet-stream';
    var contentType = headers['Content-Type'] || octetStreamMime;
    if (navigator.msSaveBlob) {
      var blob = new Blob([data], { type: contentType });
      navigator.msSaveBlob(blob, filename);
    } else {
      var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
      if (urlCreator) {
        var link = document.createElement("a");
        if ("download" in link) {
          var blob = new Blob([data], { type: contentType });
          var url = urlCreator.createObjectURL(blob);
          link.setAttribute("href", url);
          link.setAttribute("download", filename);
          var event = document.createEvent('MouseEvents');
          event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
          link.dispatchEvent(event);
        } else {
          var blob = new Blob([data], { type: octetStreamMime });
          var url = urlCreator.createObjectURL(blob);
          window.location = url;
        }
      }
    }
  });

但我的文件只是部分内容。

尝试解压缩它会给出:

stephane@stephane-ThinkPad-X60:~> unzip -l file
Archive:  file
error [file]:  missing 96319383 bytes in zipfile
  (attempting to process anyway)
error [file]:  start of central directory not found;
  zipfile corrupt.

请注意,如果跳过控制器并转到直接window.open(),则文件会完整并可以解压缩。

在控制器导出请求中,浏览器控制台显示以下标题:

Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/nitro-project-rest/rollouts/2/export
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en
Authorization:Basic bnNuQG5zbi5jb206ZXRvaWxl
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/34.0.1847.116 Chrome/34.0.1847.116 Safari/537.36
Response Headers
Access-Control-Allow-Headers:Accept-Language,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
Access-Control-Allow-Methods:POST, PUT, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:http://localhost:9000
Access-Control-Max-Age:3600
Cache-Control:no-store
Cache-Control:no-cache
Content-Disposition:attachment; filename="Orange-rollout-rollout-export.zip"
Content-Length:1960
Content-Type:application/zip
Date:Wed, 05 Nov 2014 20:33:31 GMT
download-filename:Orange-rollout-rollout-export.zip
Expires:Thu, 01 Jan 1970 00:00:00 GMT
Pragma:no-cache
Server:Apache-Coyote/1.1
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

1 个答案:

答案 0 :(得分:4)

我的$ http服务在发送请求时损坏了文件。

我需要添加以下配置:

responseType: 'arraybuffer'

如:

factory.rolloutExport = function(rolloutId, successCallback, failureCallback) {
      $http({
        url: ENV.NITRO_PROJECT_REST_URL + '/rollouts/' + rolloutId + '/export',
        method: 'GET',
        responseType: 'arraybuffer',
        cache: false,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'Authorization': AuthService.getCredentialsHeaders()
        }
      }).success(successCallback).error(failureCallback);
    };

现在,任何编码转换器都不会触及zip文件。