客户端下载服务器生成的zip文件 [英] Client download of a server generated zip file

问题描述

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

Before somebody says, "duplicate", I just want to make sure, that folks know, that I have already reviewed these questions:

1）使用角度和php，不知道这里发生了什么（我不知道PHP）：下载zip文件并触发保存文件角度方法对话框

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）无法做出任何回答：如何使用角度下载zip文件

2) Can't get this answer to do anything: how to download a zip file using angular

3）此人已经可以下载，这已经超出了我想弄清楚的一点：$ b​​ $ b 从按钮动作触发的角度下载外部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文件

4) No answer for this one: download .zip file from server in nodejs

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

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.

我的1.5.X客户端给我一个标题列表，每个标题都有一个相关的文件。我的节点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));
    };
};

带 express-zip 的节点（4.X）代码， 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)
    }
});

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

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指令中，以启动浏览器中的Save File As。也许？可能不是吗？

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中测试了我所有的角度。当我运行代码时，我在警报窗口中得到旧的访问被拒绝错误：

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！