使用Angular下载zip文件

Question

现在已经几个小时了，因为我试图弄清楚如何使用Angular下载zip文件。下载的文件小于原始文件。我点击了此链接如何使用Angular2下载文件。

我不只是<a>出于身份验证的原因将标签用于下载。

服务

 downloadfile(filePath: string){
        return this.http
            .get( URL_API_REST + 'downloadMaj?filePath='+ filePath)
            .map(res => new Blob([res], {type: 'application/zip'}))
    }

零件

downloadfileComponent(filePath: string){
        this.appService.downloadfile(filePath)
            .subscribe(data => this.getZipFile(data)),
                error => console.log("Error downloading the file."),
                () => console.log('Completed file download.');
    }


getZipFile(data: any){
        var a: any = document.createElement("a");
        document.body.appendChild(a);

        a.style = "display: none";
        var blob = new Blob([data], { type: 'application/zip' });

        var url= window.URL.createObjectURL(blob);

        a.href = url;
        a.download = "test.zip";
        a.click();
        window.URL.revokeObjectURL(url);

    }

休息api

public void downloadMaj(@RequestParam(value = "filePath") String filePath, HttpServletResponse response) {

        System.out.println("downloadMaj");
        File fichierZip = new File(filePath);

        try {
            System.out.println("nom du fichier:" + fichierZip.getName());
            InputStream inputStream = new FileInputStream(fichierZip);

            response.addHeader("Content-Disposition", "attachment; filename="+fichierZip.getName());
            response.setHeader("Content-Type", "application/octet-stream");

            org.apache.commons.io.IOUtils.copy(inputStream, response.getOutputStream());
            response.getOutputStream().flush();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

任何人都可以说为什么不下载所有文件？

解决了

 downloadfile(filePath: string){
        return this.http
            .get( URL_API_REST + 'downloadMaj?filePath='+ filePath)
            .map(res => new Blob([res], {type: 'application/zip'}))
    }

downloadfileComponent(filePath: string){
        this.appService.downloadfile(filePath)
            .subscribe(data => this.getZipFile(data)),
                error => console.log("Error downloading the file."),
                () => console.log('Completed file download.');
    }


getZipFile(data: any){
        var a: any = document.createElement("a");
        document.body.appendChild(a);

        a.style = "display: none";
        var blob = new Blob([data], { type: 'application/zip' });

        var url= window.URL.createObjectURL(blob);

        a.href = url;
        a.download = "test.zip";
        a.click();
        window.URL.revokeObjectURL(url);

    }

Answer 1

1. 在responseType中，您需要分配一个字符串，在这种情况下，为arraybuffer（Angular 5+）

downloadFile(filename: string) {
  return this.http.get(URL_API_REST + 'download?filename=' + filename, {
    responseType: 'arraybuffer'
  });
}

2. 我们可以创建一个窗口，使用下面的代码直接下载文件：

this.myService.downloadFile(filename).subscribe(data => {
  const blob = new Blob([data], {
    type: 'application/zip'
  });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
});