客户端下载一个服务器生成的zip文件
在有人说“重复”之前，我只想确定一下，那些人知道我已经回顾了这些问题：
1）使用angular度和PHP，不知道这里发生了什么（我不知道PHP）： 下载压缩文件，并从angular度的方法触发“保存文件”对话框
2）不能得到这个答案做任何事情： 如何使用angular度下载一个zip文件
3）这个人已经可以下载，这是过去的点，我试图找出： 下载外部压缩文件从触发angularbutton操作
4）没有答案： 从nodejs服务器下载.zip文件
5）我不知道甚至是什么语言： https : //stackoverflow.com/questions/35596764/zip-file-download-using-angularjs-directive
鉴于这些问题 ，如果这仍然是重复的，我很抱歉。 这是这个问题的另一个版本。
我的angular度1.5.X客户端给我一个标题列表，其中每个标题都有一个关联的文件。 我的节点4.X / Express 4.X服务器获取该列表，获取文件位置，使用来自npm的express-zip创build一个zip文件，然后将该文件传回给响应。 然后我希望我的客户端启动浏览器的“下载文件”选项。
这是我的客户端代码（Angular 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）使用express-zip编码， 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) } });
这是我的客户端代码（Angular 1.5.X）中的successCb：
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”部分似乎工作正常。 在IE的debugging器中检查它，它看起来像一个八位字节信息的文件stream。 现在，我相信我需要把这个blob放到一些HTML5指令中，从浏览器启动“另存为”。 也许？ 也许不会？
由于90％以上的用户使用IE11，我testing了PhantomJS（Karma）和IE中的所有angular度。 当我运行代码时，在警报窗口中出现旧的“访问被拒绝”错误：
Exception: {"description":"Access is denied...<stack trace>}
build议，澄清，答案等，欢迎！
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);
使用这个：
var url="YOUR ZIP URL HERE"; window.open(url, '_blank');
我更新了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中testing过这个。
正如在这个答案中指出的，我已经使用了下面的Javascript函数，现在我能够成功地下载byte[] array内容。
将字节数组stream（stringtypes）转换为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; };
这就是我如何调用这个函数，并用FileSaver.js保存blob对象（通过Angular.js $http.get获取数据）：
$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-Server-Side）：
byte[] myByteArray = /*generate your zip file and convert into byte array*/ new byte[](); return new ResponseEntity<byte[]>(myByteArray , headers, HttpStatus.OK);