Angular 2下载Zip格式文件

时间:2018-01-19 14:35:28

标签: javascript node.js angular

我有一个Node JS Rest获取服务,它以二进制编码格式发送在我的服务器上创建的zip文件夹。但无法在客户端上下载。我无法打开拉链。

服务器控制器

botsController.exportBot = (req,res) =>{
    let botId = req.params.botId;
    zipFolder("...pathtoZip/", "pathToFolder/my.zip", function(err) {
        if(err) {

            res.statusCode = 500;
            return res.send({
                success: false,
                message: "Something went wrong while fetching the bot data",
                err_details: err
            });

        } else {
            let filetext;
            let zipFolder= "pathToFolder/my.zip";

            if (fs.existsSync(zipFolder)) {
                filetext = fs.readFileSync(zipFolder, "utf-8");//tried encoding binary
            }

            var headers = {
                'Content-Type':  'application/octet-stream',//tried application/zip
                'Content-Disposition': "attachment; filename=" + botId + '.zip'
            };
            res.writeHead(200, headers);
            return res.end(filetext,"binary");

        }
    });

在角度js服务上我获取数据。在组件上我已经下载了它。但下载zip已损坏,导致错误无法打开zip。

Angular 2服务

  exportBot() {
    let token = localStorage.token;
    let headerObj = {
      'Authorization': token,
      responseType: ResponseContentType.ArrayBuffer
    };
    let headers = new Headers(headerObj);

    return this.http.get("export/botId", { headers: headers })
      .map((res) => new Blob([res['_body']], { type: 'application/zip' }))
      .catch(this.errorHandler);

  }

在组件端

exportBot() {
        this.loader = false;
        this.botdataservice.exportBot()
            .subscribe(res => {
                console.log(`excel data: ${res}`);
                window.open(window.URL.createObjectURL(res));
            },
            err => {
               console.log(err); 
            })
        }

2 个答案:

答案 0 :(得分:2)

在你的package.json中添加依赖项:

"file-saver": "^1.3.3",

您可以在get请求中使用文件保护程序,如下所示:

public getBlob(url: string): Observable<Blob> {
    this.showLoader();
    return this.http.get(url, {responseType: 'blob'})
      .catch(this.onCatch)
      .do(res => {
        this.onSuccess(res);
      }, (error: any) => {
        this.onError(error);
      })
      .finally(() => {
        this.onEnd();
      });
  }

和下载方法:

  downloadFile(fileid: string) {
    return this._http.getBlob(this._http.backendURL.downloadFile.replace(':fileid', fileid))
  }

在订阅数据时你调用Filesaver:

 downloadFile() {
    this._downloadFileService.downloadFile(this.model.fileid)
      .subscribe(
        data => {
          FileSaver.saveAs(data, this.form.getRawValue().title);
        }
      );
  }

我希望这可以提供帮助。

答案 1 :(得分:1)

您可以使用btoa(unescape(encodeURIComponent(binarydata)))将文件转换为base64,如果是数组缓冲区,请尝试btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

甚至可以从节点服务器发送base64文件

filetext = fs.readFileSync(zipFolder);

return res.end(new Buffer(filetext ).toString('base64'));

在这种情况下更改标题

并使用以下代码下载

var base64Str = "UEsDBAoAAgAAAMWqM0z4bm0cBQAAAAUAAAAJAAAAdmlub2QudHh0dmlub2RQSwECFAAKAAIAAADFqjNM+G5tHAUAAAAFAAAACQAkAAAAAAABACAAAAAAAAAAdmlub2QudHh0CgAgAAAAAAABABgAUCMddj2R0wFA/Bx2PZHTAWCGE3Y9kdMBUEsFBgAAAAABAAEAWwAAACwAAAAAAA==";

var elem = window.document.createElement('a');
        elem.href = "data:application/zip;base64,"+base64Str
        elem.download = "my.zip";        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);

相关问题