问题描述
在有人说重复"之前,我只想确保大家知道,我已经查看了这些问题:
Before somebody says, "duplicate", I just want to make sure, that folks know, that I have already reviewed these questions:
1) 使用 angular 和 php,不确定这里发生了什么(我不知道 PHP):下载 zip 文件并触发保存文件";来自angular方法的对话框
1) Uses angular and php, not sure what is happening here (I don't know PHP): Download zip file and trigger "save file" dialog from angular method
2) 无法得到这个答案来做任何事情:how使用 angular 下载 zip 文件
2) Can't get this answer to do anything: how to download a zip file using angular
3) 这个人已经可以下载了,这已经超出了我想弄清楚的点:从按钮触发的角度下载外部 zip 文件动作
3) This person can already download, which is past the point I'm trying to figure out:Download external zip file from angular triggered on a button action
4) 没有答案:从 nodejs 中的服务器下载 .zip 文件
5) 我什至不知道这是什么语言:https://stackoverflow.com/questions/35596764/zip-file-download-using-angularjs 指令
5) I don't know what language this even is:https://stackoverflow.com/questions/35596764/zip-file-download-using-angularjs-directive
鉴于这些问题,如果这仍然是重复的,我深表歉意.这是这个问题的另一个版本.
Given those questions, if this is still a duplicate, I apologize. Here is, yet, another version of this question.
我的 Angular 1.5.X 客户端给了我一个标题列表,每个标题都有一个关联的文件.我的 Node 4.X/Express 4.X 服务器获取该列表,获取文件位置,创建一个 zip 文件,使用来自 npm 的 express-zip,然后将该文件流式传输回响应.然后我希望我的客户端启动浏览器的下载文件"选项.
My angular 1.5.X client gives me a list of titles, of which each have an associated file. My Node 4.X/Express 4.X server takes that list, gets the file locations, creates a zip file, using express-zip from npm, and then streams that file back in the response. I then want my client to initiate the browser's "download a file" option.
这是我的客户端代码(Angular 1.5.X):
Here's my client code (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));
};
};
Node (4.X) 代码,带有 express-zip,https://www.npmjs.com/package/express-zip:
Node (4.X) code with 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:
Here's my successCb in my client code (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"部分似乎工作正常.在 IE 的调试器中检查它,它确实看起来像一个八位字节信息的文件流.现在,我相信我需要将该 blob 放入一些 HTML5 指令中,以从浏览器启动文件另存为".也许?也许不是?
The "blob" part seems to work fine. Checking it in IE's debugger, it does look like a file stream of octet information. Now, I believe I need to get that blob into the some HTML5 directive, to initiate the "Save File As" from the browser. Maybe? Maybe not?
由于我们 90% 以上的用户都在使用 IE11,所以我在 PhantomJS (Karma) 和 IE 中测试了我的所有 angular.当我运行代码时,我在警报窗口中收到旧的访问被拒绝"错误:
Since 90%+ of our users are using IE11, I test all of my angular in PhantomJS (Karma) and IE. When I run the code, I get the old "Access is denied" error in an alert window:
Exception: {"description":"Access is denied...<stack trace>}
欢迎提出建议、澄清、回答等!
Suggestions, clarifications, answers, etc. are welcome!
推荐答案
我更新了我的 bulkdownload
方法以使用 $window.open(...)
而不是 $http.get(...):
I updated my bulkdownload
method to use $window.open(...)
instead of $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 中测试过.
I have only tested this in IE11.
这篇关于客户端下载服务器生成的 zip 文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!