Spring + Angular-如何下载服务器生成的文件

Tecnogirl:

我的服务器上有一个端点,该端点应该返回动态生成的json文件。这是我写的:

    @GetMapping(value = "/{id}/json", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
    @ApiOperation(value = "Animal data as a json file", authorizations = {@Authorization(value = "JWT")})
    public ResponseEntity<byte[]> getAnimalFile(@PathVariable("id") String id) throws JsonProcessingException {
       Animal animal = animalService.getAnimal(id);
       return ResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + animal.getId() + ".json").body(new ObjectMapper().writeValueAsBytes(animal));
    }

@ApiOperation允许swagger生成我的客户端库时包括此操作。但是,这是ng-swagger-gen在Angular端创建的:

  /**
   * @param id id
   * @return OK
   */
  getAnimalFileUsingGET(id: string): __Observable<string> {
    return this.getAnimalFileUsingGETResponse(id).pipe(
      __map(_r => _r.body as string)
    );
  }

这是不理想的,因为我无法以这种方式下载服务器生成的文件。在我的组件中,我有一个exportJSON方法:

exportJSON(): void {
   this.animalService.getAnimalFileUsingGET(this.animal.id).subscribe(content => {
       console.log(content); // prints the json content but I don't have the filename
   });
}

我在SO上查看了其他答案,他们说使用,window.open(SERVER_ENDPOINT_HERE)但这不起作用,因为我的端点使用身份验证(JWT)。

有没有一种方法可以:

  • 使ng-swagger-gen意识到这是一个带有文件名的文件,并在我订阅Observable时提供给我两者
  • 还是绕过招摇并使用Angular使用服务器提供的文件名和身份验证下载文件?

理想的解决方案是在服务器端进行一些更改,以使swagger生成正确的响应类型,在此我可以从服务器获取文件和文件名。

古兹曼诺:

请尝试以下操作:

 getAnimalFileUsingGET(id: string | number): Observable<Blob> {
    return this.http.get(`/stats/export/${id}`, {responseType: 'blob'}); // Adjust your GET accordingly
  }

另外,您将需要安装FileSaver.js

npm i [email protected]

最后,像这样使用它:

 import { saveAs } from 'file-saver';
 .
 .
 .
 .
 .

 exportJSON(): void {
     this.animalService.getAnimalFileUsingGET(this.animal.id).subscribe((blob: Blob) => {
       saveAs(blob, 'export.json');
     });
 }

编辑1:为了能够访问Content-disposition标头,您需要指示Angular Http客户端在响应中进行一些更改。

  getAnimalFileUsingGET(id: string | number): Observable<HttpResponse<any>> {
    return this.http.get(`/stats/export/${id}`, {observe: 'response', responseType: 'json' })
  }

然后,您可以像这样订阅:

exportJSON(): void {
this.animalService.getAnimalFileUsingGET(this.animal.id).subscribe((resp: HttpResponse<Blob>) => {
           console.log(resp.headers.get('content-disposition'));
           // Extract filename from header
           const filename = '';
           saveAs(resp.body, filename);
   });
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用REST模板Java Spring MVC从服务器下载大文件

从Angular中的服务器下载文本/ csv内容作为文件

如何在不使用Spring Boot的情况下使用Spring Integration从sftp服务器下载文件

将POST请求发送到服务器,服务器的响应为空,Angular-Spring-boot

从Angular和Spring MVC API下载文件

如何使用Java + Spring代码将MFT服务器与其他服务器连接起来以执行诸如上传,下载和列出文件的操作

在同一服务器上的Spring Boot + Angular2

Spring Boot示例如何从服务器下载文件

Angular 2+从服务器下载图像

Angular 6:从后端服务器获取File对象后下载文件

Spring Integration:仅从FTP服务器下载新文件或更新文件?

如何在Spring配置服务器中动态生成配置属性?

带有Angular前端的Spring后端-如何在服务器更改时更新视图

在Angular 8中从web.api下载文件时从服务器获取文件名

Angular Spring启动文件下载

如何在Angular中生成服务器端会话变量?

如何在Spring Boot项目中使文件可从服务器下载到前端,为文件下载创建了Rest API,但未按预期运行?

没有在服务器中保存文件,我无法通过Spring MVC中的Ajax下载文件

如何在Angular / Spring Boot应用程序的服务器端接收表单数据?

服务器如何在Spring框架中为单例对象生成新线程

如何从Spring Integration ftp中的服务器下载以“ xyz”开头的文件名?

节点服务器拦截从angular(http)到Java Spring后端的所有请求

如何下载 filename*.csv,如果 filename*.marker 文件存在于使用 spring 集成 ftp 支持的 FTP 服务器上

Angular JS + Spring MVC:尝试下载生成的文件时出现 406

如何在tomcat服务器上的单个war或jar文件中使用spring boot部署angular 5

Spring Boot Rest 服务 Angular

如何在我的 .NET Core 服务器中生成 Angular 路由的 URL

我无法向我自己的 Spring 引导服务器发出 Angular Http 请求

服务器在 Spring 应用程序中生成 env.json 文件