如何通过 Spring Boot 和 Angular 9 下载 xls 文件

Question

（Jhipster，前端 Angular 9 和后端 spring-boot）

我的应用会生成 xls 报告。 该报告是用 Apache Poi 完成的，并在本地复制。

现在我正在尝试将文件下载到客户端，但我不知道如何。

我想在下载完成后删除文件。 这是一个 post 方法，因为我发送报告的数据。

你有什么想法吗？

这是我的控制器：

public void createFullReport(@Valid @RequestBody ReportDTO report, HttpServletResponse response) throws IOException {
    log.debug("REPORTDTO : {}", report);

    File outputFile = this.reportService.makeFullReport(report);

    log.debug("FILE EXIST:{}", outputFile.exists());
    log.debug("IS FILE:{}", outputFile.isFile());
    log.debug("FILE NAME:{}", outputFile.getName());

    FileInputStream stream = new FileInputStream(outputFile);
    response.setContentType("application/vnd.ms-excel");
    response.setHeader("Content-disposition", "attachment; filename=" + outputFile.getName());
    }

我的服务：

create(report: IReport): any {
    console.log(report);
    return this.http.post<any>(this.resourceUrl, report, { observe: 'response' });
  }

我的组件：

this.reportService.create(this.report).subscribe((response: any) => {
  console.log(response);
  var blob = new Blob([response._body], { type: 'application/vnd.ms-excel' });
});

编辑

控制器：

@PostMapping("/report")
@PreAuthorize(
    "hasAnyAuthority(\"" +
    AuthoritiesConstants.ADMIN +
    "\"+\"," +
    AuthoritiesConstants.CUSTOMER_ADMIN +
    "\"+\"," +
    AuthoritiesConstants.INSPECTOR +
    "\")"
)
public ResponseEntity  createFullReport(@Valid @RequestBody ReportDTO report, HttpServletResponse response) throws IOException {
    log.debug("REPORTDTO : {}", report);
    XSSFWorkbook wb = (XSSFWorkbook) this.reportService.makeFullReport(report);
    response.setHeader("Content-Disposition","attachment; filename=\"timesheet.xlsx\"");
    writeToOutputStream(response,wb);
    return ResponseEntity.ok().build();
}

private void writeToOutputStream(HttpServletResponse response,XSSFWorkbook wb){

    ServletOutputStream out ;
    try {
        out = response.getOutputStream();
        wb.write(out);
        wb.close();
        out.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

角度服务：

  create(report: IReport): any {
    console.log(report);
    let HTTPOptions:Object = {

      headers: new HttpHeaders({
          'Content-Type': 'application/json'
      }),
      responseType: 'blob'
   }
    return this.http.post<any>(this.resourceUrl, report,HTTPOptions);
  }

Answer 1

我想在下载完成后删除文件。这是一个帖子 方法，因为我发送报告的数据。

那会很复杂，你不需要这么复杂。

尽量不要将您的 xls 文件保存在某处。只需使用您的 apache poi 作为工作簿创建它。然后将该工作簿的内容作为字节数组直接写入控制器中。

这样，您将实现动态创建和交付 xls 文件，而无需同步后端和前端以便稍后将其删除。

 @PostMapping()
 public ResponseEntity createAndDeliverFile(HttpServletResponse response){
        
        response.setHeader("Content-Disposition","attachment; filename=\"myFileName.xlsx\"");

        XSSFWorkbook wb = fileWriterService.createAndReturnFile();

        writeToOutputStream(response,wb);

        return ResponseEntity.ok().build();
    }


   public void writeToOutputStream(HttpServletResponse response,XSSFWorkbook wb){

    ServletOutputStream out ;
    try {
        out = response.getOutputStream();
        wb.write(out);
        wb.close();
        out.close();
    } catch (IOException e) {
        e.printStackTrace();
    }

}

至于下载文件，您的代码似乎没有错，但是如果它带来任何类型的错误，您可能需要稍微调整一些东西。准备好后只需添加 FileSaver 即可下载文件

 My component:

    import * as FileSaver from 'file-saver';
    
    this.reportService.create(this.report).subscribe((response: any) => {
      console.log(response);
      var blob = new Blob([response._body], { type: 'application/vnd.ms-excel'});
      FileSaver.saveAs(blob, 'filename' + '.xlsx;);
    });

在 cmets 之后编辑（看来当数据来自 xlsx 时转换为 Blob 需要格外小心！）

create(report: IReport): any {
    console.log(report);
    let HTTPOptions:Object = {

      headers: new HttpHeaders({
          'Content-Type': 'application/json'
      }),
      responseType: 'blob' as 'json'   <----------
   }
    return this.http.post<any>(this.resourceUrl, report,HTTPOptions);
  }

我的组件：

    import * as FileSaver from 'file-saver';
    
    this.reportService.create(this.report).subscribe((response: any) => {
    console.log(response);
    var blob = new Blob([s2ab(atob(data))], {type: ''}); <----------
    FileSaver.saveAs(blob, 'filename' + '.xlsx;); 
    });

   private s2ab(s) {
     var buf = new ArrayBuffer(s.length);
     var view = new Uint8Array(buf);
     for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
     return buf;
    }*

如果成功，别忘了给这个答案发学分 blob from xlsx