下载AngularJS一个zip文件 [英] Download a zip file in AngularJS

问题描述

试图在AngularJS一个zip文件下载我看着<一个href=\"http://stackoverflow.com/questions/25490007/angularjs-download-pdf-file-from-the-server\">AngularJS:从服务器并codeD我的控制器下载PDF文件：

  RolloutService.export（rollout.id，功能（数据，状态，标题）{
    VAR头=头（）;
    变种文件名=标题['下载文件名'] || '文件';
    VAR octetStreamMime ='应用程序/八位字节流;
    VAR的contentType =标题['内容类型'] || octetStreamMime;
    如果（navigator.msSaveBlob）{
      VAR BLOB =新的Blob（[数据] {类型：contentType中}）;
      navigator.msSaveBlob（BLOB，文件名）;
    }其他{
      VAR urlCreator = window.URL || window.webkitUR​​L || window.mozURL || window.msURL;
      如果（urlCreator）{
        变种链路= document.createElement方法（一）;
        如果（下载链接中）{
          VAR BLOB =新的Blob（[数据] {类型：contentType中}）;
          VAR URL = urlCreator.createObjectURL（BLOB）;
          link.setAttribute（的href，URL）;
          link.setAttribute（下载，文件名）;
          VAR事件= document.createEvent（'MouseEvents'）;
          event.initMouseEvent（'点击'，真的，真的，窗口，1，0，0，0，0，假的，假的，假的，假的，0，NULL）;
          link.dispatchEvent（事件）;
        }其他{
          VAR BLOB =新的Blob（[数据] {类型：octetStreamMime}）;
          VAR URL = urlCreator.createObjectURL（BLOB）;
          window.location的= URL;
        }
      }
    }
  }）;
 

但我的文件部分来只。

试图将它解压缩得到：

 斯特凡@斯特凡 - 的ThinkPad-X60：〜＆GT;解压缩文件-l
存档：文件
错误[文件]：缺少压缩文件96319383字节
  （试图处理反正）
错误[文件]：中央目录开始没有发现;
  zip文件损坏。
 

请注意，如果跳过控制器和一个直接window.open会（），则该文件来完成，可以解压。

在控制器导出请求，浏览器控制台显示以下标题：

 远程地址：127.0.0.1：8080
请求URL：http：//本地主机：8080 /硝基项目REST /卷展栏/ 2 /导出
请求方法：GET
状态code：200 OK
请求Headersview源
接受：应用/ JSON，纯文本/ * / *
接受编码：gzip，紧缩，SDCH
接受语言：恩
授权：基本bnNuQG5zbi5jb206ZXRvaWxl
连接：保持活动
主机：本地主机：8080
产地：HTTP：//本地主机：9000
引用者：HTTP：//本地主机：9000 /
用户代理：Mozilla的/ 5.0（X11; Linux的i686的）为AppleWebKit / 537.36（KHTML，例如Gecko）Ubuntu的铬/ 34.0.1847.116铬/ Safari浏览器34.0.1847.116 / 537.36
响应头
Access-Control-Allow-Headers:Accept-Language,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
访问控制允许的方法：POST，PUT，GET，OPTIONS，DELETE
访问控制允许来源：HTTP：//本地主机：9000
访问控制，最大年龄：3600
缓存控制：无店
缓存控制：无缓存
内容处置：附件;文件名=Orange-rollout-rollout-export.zip
内容长度：1960
内容类型：应用程序/压缩
日期：星期三，2014年11月5日20点33分31秒GMT
下载文件名：Orange-rollout-rollout-export.zip
到期日：周四，1970 00:00:00 GMT 01一月
编译：无缓存
服务器：Apache-狼/ 1.1
的X内容类型选项：nosniff
X框选项：DENY
的X XSS-保护：1;模式=块
 

解决方案

发送请求时，我的$ HTTP服务被破坏的文件。

我需要添加以下配置：

 的responseType：arraybuffer
 

在

  factory.rolloutExport =功能（rolloutId，successCallback，failureCallback）{
      $ HTTP（{
        网址：ENV.NITRO_PROJECT_REST_URL +'/卷展栏/+ rolloutId +'/导出，
        方法：GET，
        responseTyp的：arraybuffer'，
        缓存：假的，
        标题：{
          内容类型：应用/ JSON的;字符集= UTF-8，
          '授权'：AuthService.getCredentialsHeaders（）
        }
      }）成功（successCallback）.error（failureCallback）;
    };
 

现在zip文件回来触及任何编码转换器。

Trying to have a zip file download in AngularJS I looked at AngularJS: download pdf file from the server and coded my controller as:

  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;
        }
      }
    }
  });

But my file comes partly only.

Trying to unzip it gives:

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.

Note that if skipping the controller and going for a direct window.open() then the file comes complete and can be unzipped.

On the controller export request, the browser console shows the following headers:

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

解决方案

My $http service was corrupting the file when sending the request.

I needed to add the following configuration:

responseType: 'arraybuffer'

as in:

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);
    };

Now the zip file comes back untouched by any encoding converter.

这篇关于下载AngularJS一个zip文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！