客户端下载

Question

之前有人说，“复制”，我只是想确保，即人们知道，我已经审查了这些问题：

1）使用的角度和PHP，不肯定这里发生了什么（我不知道PHP）：Download zip file and trigger "save file" dialog from angular method

2）不能得到这个答案，做任何事情：how to download a zip file using angular

3）此人已经可以下载，这是过去的时候，我正试图弄清楚： Download external zip file from angular triggered on a button action

4）没有回答这一个： download .zip file from server in nodejs

5）我不知道用什么语言这甚至是： https://stackoverflow.com/questions/35596764/zip-file-download-using-angularjs-directive

鉴于这些问题，如果这仍然是一个重复的，我道歉。这是另一个版本的问题。

我的角度1.5.X客户端给我一个标题列表，其中每个标题都有一个关联的文件。我的节点4.X/Express 4.X服务器获取该列表，获取文件位置，使用npm中的express-zip创建一个zip文件，然后将该文件传回给响应。然后我希望我的客户端启动浏览器的“下载文件”选项。

这里是我的客户端代码（角1.5.X）：

function bulkdownload(titles){ 
    titles = titles || []; 
    if (titles.length > 0) { 
     $http.get('/query/bulkdownload',{ 
      params:{titles:titles}, 
      responseType:'arraybuffer' 
     }) 
     .then(successCb,errorCb) 
     .catch(exceptionCb); 
    } 

    function successCb(response){ 
     // This is the part I believe I cannot get to work, my code snippet is below 
    }; 

    function errorCb(error){ 
      alert('Error: ' + JSON.stringify(error)); 
    }; 

    function exceptionCb(ex){ 
      alert('Exception: ' + JSON.stringify(ex)); 
    }; 
}; 

节点（4.X）与快递拉链，https://www.npmjs.com/package/express-zip代码：

router.get('/bulkdownload',function(req,resp){ 
    var titles = req.query.titles || []; 

    if (titles.length > 0){ 
     utils.getFileLocations(titles). 
     then(function(files){ 
      let filename = 'zipfile.zip'; 

      // .zip sets Content-Type and Content-disposition 
      resp.zip(files,filename,console.log); 
     }, 
     _errorCb) 
    } 
}); 

这里是我的successCb在我客户端代码（Angular 1.5.X）：

function successCb(response){ 
    var URL = $window.URL || $window.webkitURL || $window.mozURL || $window.msURL; 
    if (URL) { 
     var blob = new Blob([response.data],{type:'application/zip'}); 
     var url = URL.createObjectURL(blob); 
     $window.open(url); 
    } 
}; 

“blob”部分s eems工作正常。在IE的调试器中检查它，它看起来像一个八位字节信息的文件流。现在，我相信我需要将该blob放入一些HTML5指令中，从浏览器启动“另存文件”。也许？也许不会？

由于90％以上的用户使用IE11，我测试了PhantomJS（Karma）和IE中的所有角度。当我运行的代码，我得到的是旧“访问被拒绝”的一个警告窗口错误：

Exception: {"description":"Access is denied...<stack trace>} 

建议，澄清，解答等，欢迎！

Answer 1

我更新了我的bulkdownload方法使用$window.open(...)而不是$http.get(...)：

function bulkdownload(titles){ 
    titles = titles || []; 
    if (titles.length > 0) { 
     var url = '/query/bulkdownload?'; 
     var len = titles.length; 
     for (var ii = 0; ii < len; ii++) { 
      url = url + 'titles=' + titles[ii]; 
      if (ii < len-1) { 
       url = url + '&'; 
      } 
     } 
     $window.open(url); 
    } 
}; 

我只在IE11测试这一点。

Answer 2

var zip_file_path = "" //put inside "" your path with file.zip 
var zip_file_name = "" //put inside "" file name or something 
var a = document.createElement("a"); 
document.body.appendChild(a); 
a.style = "display: none"; 
a.href = zip_file_path; 
a.download = zip_file_name; 
a.click(); 
document.body.removeChild(a); 

Answer 3

如this answer指出，我用下面的JavaScript函数，现在我能够成功下载byte[] array内容。

功能到字节数组流（字符串类型）转换成blob对象：

var b64toBlob = function(b64Data, contentType, sliceSize) { 
     contentType = contentType || ''; 
     sliceSize = sliceSize || 512; 

     var byteCharacters = atob(b64Data); 
     var byteArrays = []; 

     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
     } 

     var blob = new Blob(byteArrays, {type: contentType}); 
     return blob; 
}; 

一种这是我的调用此函数和（经由Angular.js $http.get获取数据）FileSaver.js保存blob对象：

$http.get("your/api/uri").success(function(data, status, headers, config) { 
     //Here, data is type of string 
     var blob = b64toBlob(data, 'application/zip'); 
     var fileName = "download.zip"; 
     saveAs(blob, fileName); 
    }); 

注：我送byte[] array（Java的服务器端）是这样的：

byte[] myByteArray = /*generate your zip file and convert into byte array*/ new byte[](); 
return new ResponseEntity<byte[]>(myByteArray , headers, HttpStatus.OK); 

Answer 4

使用这一个：

var url="YOUR ZIP URL HERE"; 
window.open(url, '_blank');