我正在使用angular下载大文件,对于后端,我正在使用spring boot,这是端点的代码:
@RequestMapping(值="/下载",方法= RequestMethod.GET)公共StreamingResponseBody下载(@PathVariable字符串路径)引发IOException {最终InputStream文件= azureDataLakeStoreService.readFile(path);return(os)->{readAndWrite(file,os);};}私有无效的readAndWrite(最终InputStream是,OutputStream os)引发IOException {字节[]数据=新字节[2048];int读取= 0;而(((read = is.read(data))> = 0){System.out.println(附加到文件");os.write(数据,0,读取);}os.flush();}当我尝试使用curl获取文件时,它可以工作,并且可以看到正在下载的文件,并且文件的大小正在增加:
curl -H授权:Bearer< MyToken>"localhost:9001/rest/api/analyses/download --output test.zip但是,当我尝试使用angular下载文件时,即使请求成功,也无法正常工作,并且在日志中可以看到多次显示"append to file"的文本,但没有下载任何内容浏览器,这是我的代码:
this.http.get(URL,{标头:标头,responseType:'blob',观察:'response'}).subscribe(response => {const contentDispositionHeader:字符串= response.headers.get('Content-Disposition');常量部分:string [] = contentDispositionHeader.split(';');const filename = parts [1] .split('=')[1];const blob = new Blob([response.body],{类型:"application/zip"});saveAs(blob,文件名);});saveAs()属于
解决方案似乎我错过了带有标头的arround,在保存的同时,这是最终版本,可能会帮助其他人:
Spring Boot
将这些配置添加到 ApplicationInit :
@Configuration公共静态类WebConfig扩展了WebMvcConfigurerAdapter {@Override公共无效configureAsyncSupport(AsyncSupportConfigurer配置器){configurer.setDefaultTimeout(-1);configurer.setTaskExecutor(asyncTaskExecutor());}@豆公共AsyncTaskExecutor asyncTaskExecutor(){返回新的SimpleAsyncTaskExecutor("async");}}然后将其发送给您的控制器:
@RequestMapping(值="{analyseId}/download",方法= RequestMethod.GET,产生="application/zip")公共ResponseEntity< StreamingResponseBody>下载(@PathVariable Long analyseId)引发IOException {尝试 {分析analyze = analyseService.getAnalyse(analyseId);最终InputStream文件= azureDataLakeStoreService.readFile(analyse.getZippedFilePath());长文件长度= azureDataLakeStoreService.getContentSummary(analyse.getZippedFilePath()).length;StreamingResponseBody stream = outputStream->readAndWrite(file,outputStream);字符串zipFileName = FilenameUtils.getName(analyse.getZippedFilePath());返回ResponseEntity.ok().header(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS,HttpHeaders.CONTENT_DISPOSITION).header(HttpHeaders.CONTENT_DISPOSITION,附件;文件名=" + zipFileName).contentLength(fileLength).contentType(MediaType.parseMediaType("application/zip")).body(stream);} catch(Exception e){e.printStackTrace();返回ExceptionMapper.toResponse(e);}}私有无效的readAndWrite(最终InputStream是,OutputStream os)引发IOException {字节[]数据=新字节[2048];int读取= 0;而(((read = is.read(data))> = 0){os.write(数据,0,读取);}os.flush();}角度
download(id){让url = URL +'/analyses/'+ id +'/download';const headers = new HttpHeaders().set('Accept','application/zip');const req = new HttpRequest('GET',url,{标头:标头,responseType:"blob",观察:响应",reportProgress:是的,});const dialogRef = this.dialog.open(DownloadInProgressDialogComponent);this.http.request(req).subscribe(event => {如果(event.type === HttpEventType.DownloadProgress){dialogRefponentInstance.progress = Math.round(100 * event.loaded/event.total)//下载百分比} else if(HttpResponse的事件instance){dialogRefponentInstance.progress = 100;this.saveToFileSystem(event,'application/zip');dialogRef.close();}});}私人saveToFileSystem(响应,类型){const contentDispositionHeader:字符串= response.headers.get('Content-Disposition');常量部分:string [] = contentDispositionHeader.split(';');const filename = parts [1] .split('=')[1];const blob = new Blob([response.body],{类型:类型});saveAs(blob,文件名);}I'm using angular to download big files, for the backend I'm using spring boot, here's the code of the end point:
@RequestMapping(value = "/download", method = RequestMethod.GET) public StreamingResponseBody download(@PathVariable String path) throws IOException { final InputStream file =azureDataLakeStoreService.readFile(path); return (os) -> { readAndWrite(file , os); }; } private void readAndWrite(final InputStream is, OutputStream os) throws IOException { byte[] data = new byte[2048]; int read = 0; while ((read = is.read(data)) >= 0) { System.out.println("appending to file"); os.write(data, 0, read); } os.flush(); }When I try to get the file using curl it works, and I can see the file being downloaded and it's size increasing:
curl -H "Authorization: Bearer <MyToken>" localhost:9001/rest/api/analyses/download --output test.zipHowever, when I try to download a file using angular it doesn't work, even though the request is successful, and I can see in the logs the text "appending to file" showing multiple times, but nothing is downloading on the browser, here's my code:
this.http.get(url, { headers: headers, responseType: 'blob', observe: 'response' }) .subscribe(response => { const contentDispositionHeader: string = response.headers.get('Content-Disposition'); const parts: string[] = contentDispositionHeader.split(';'); const filename = parts[1].split('=')[1]; const blob = new Blob([response.body], { type: 'application/zip' }); saveAs(blob, filename); });saveAs() belong to file-saver, btw the above code works when I try to download a file as a byte[] ( without streaming ).
All I can find in the internet is this code and it's using angularJs while I'm using angular 5, Can anybody point the problem! thanks.
UPDATE:
I can see that the file is being downloaded in the network tab of Google chrome, but I have no idea where the file is being saved.
解决方案It's seems that I missed arround with headers, while saving, this is the final version, it may help someone else:
Spring Boot
Add these configurations to ApplicationInit:
@Configuration public static class WebConfig extends WebMvcConfigurerAdapter { @Override public void configureAsyncSupport(AsyncSupportConfigurer configurer) { configurer.setDefaultTimeout(-1); configurer.setTaskExecutor(asyncTaskExecutor()); } @Bean public AsyncTaskExecutor asyncTaskExecutor() { return new SimpleAsyncTaskExecutor("async"); } }And this to your controller:
@RequestMapping(value = "{analyseId}/download", method = RequestMethod.GET, produces = "application/zip") public ResponseEntity<StreamingResponseBody> download(@PathVariable Long analyseId) throws IOException { try { Analyse analyse = analyseService.getAnalyse(analyseId); final InputStream file =azureDataLakeStoreService.readFile(analyse.getZippedFilePath()); Long fileLength = azureDataLakeStoreService.getContentSummary(analyse.getZippedFilePath()).length; StreamingResponseBody stream = outputStream -> readAndWrite(file , outputStream); String zipFileName = FilenameUtils.getName(analyse.getZippedFilePath()); return ResponseEntity.ok() .header(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_DISPOSITION) .header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + zipFileName) .contentLength(fileLength) .contentType(MediaType.parseMediaType("application/zip")) .body(stream); } catch (Exception e) { e.printStackTrace(); return ExceptionMapper.toResponse(e); } } private void readAndWrite(final InputStream is, OutputStream os) throws IOException { byte[] data = new byte[2048]; int read = 0; while ((read = is.read(data)) >= 0) { os.write(data, 0, read); } os.flush(); }Angular
download(id) { let url = URL + '/analyses/' + id + '/download'; const headers = new HttpHeaders().set('Accept', 'application/zip'); const req = new HttpRequest('GET', url, { headers: headers, responseType: 'blob', observe: 'response', reportProgress: true, }); const dialogRef = this.dialog.open(DownloadInProgressDialogComponent); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.DownloadProgress) { dialogRefponentInstance.progress = Math.round(100 * event.loaded / event.total) // download percentage } else if (event instanceof HttpResponse) { dialogRefponentInstance.progress = 100; this.saveToFileSystem(event, 'application/zip'); dialogRef.close(); } }); } private saveToFileSystem(response, type) { const contentDispositionHeader: string = response.headers.get('Content-Disposition'); const parts: string[] = contentDispositionHeader.split(';'); const filename = parts[1].split('=')[1]; const blob = new Blob([response.body], { type: type }); saveAs(blob, filename); }
更多推荐
Angular不会从流中下载文件(StreamingResponseBody)
发布评论