각도를 사용하여 zow 파일을 다운로드하십시오.

Question

각도를 사용하여 zip 파일을 다운로드하는 방법을 알아 내려고 지금부터 몇 시간이 걸렸습니다. 다운로드 한 파일의 크기가 원본 파일보다 작습니다. 나는이 링크 How do I download a file with 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 + 'download?filePath=' + filePath, {responseType: ResponseContentType.ArrayBuffer}) 
      .map(res => res) 
     } 

private getZipFile(data: any) { 
    const blob = new Blob([data['_body']], { type: 'application/zip' }); 

    const a: any = document.createElement('a'); 
    document.body.appendChild(a); 

    a.style = 'display: none';  
    const url = window.URL.createObjectURL(blob); 
    a.href = url; 
    a.download = test.zip; 
    a.click(); 
    window.URL.revokeObjectURL(url); 

    } 

Answer 1

당신이 각 사용하여 작업 우편 다운로드를 얻을해야합니다 여러 플러그인이 있습니다

1. angular-file-saver.bundle

   이

   이 플러그인은 물방울을 번들 것은 .js 및 FileSaver.js 모든 지시 사항을 따르십시오. 컨트롤러와 모듈에 의존성을 추가하십시오.

   .module('fileSaverExample', ['ngFileSaver']) .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

2. JSZip 추가 JSZipUtils

파일 포함 : jszip.js, jszip-utils.js, 각 파일-saver.bundle.js을

var zip = new JSZip(); 
 
zip.file("Hello.txt", "Hello World\n"); 
 

 
// when everything has been downloaded, we can trigger the dl 
 
zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file 
 
FileSaver.saveAs(blob, "downloadables.zip");       // 2) trigger the download 
 
}, function (err) { 
 
    console.log('err: '+ err); 
 
});