Angular 7 File Saver 使用编码字节数组保存文件，而不是将其转换为 CSV 格式

Question

我在 Angular 7 上使用 file saver 来保存从 Spring 引导后端返回的 CSV 文件。 Spring Boot returns CSV 文件对象，具有一些属性，即字节数组格式的名称、大小、类型和文件内容。当我打开保存页面时，File Saver 使用字节数组文本保存文件，而不是转换为 CSV 格式并将其保存到文件中。

获取文件内容

getFileContent(id)
  {
    this.filesService.getFileContent(SERVER_API_URL + "files/" + id).subscribe(
      data =>
      {
        this.fileObservable = data;
        let blob = new Blob([this.fileObservable.fileContent], {type: "text/csv;charset=utf-8"});
        saveAs(blob, "test.csv",{ autoBOM: true });
      });
  }

休息API:

@GetMapping(value = "/files/{id}")
    public CsvFile getFileById(@PathVariable Long id)
    {
        return csvUploadService.getFileById(id);
    }

Answer 1

部分问题与 Angular 的 Base64 转换有关。当 byte[] 从 Spring 收到数据时， Angular 将其转换为 Base64 字符串。我使用 blob-util 将 Base64 字符串转换为 byte[]，然后将其传递给 File-Saver。更新代码如下

获取文件内容

 getFileContent(id)
  {
    this.filesService.getFileContent(SERVER_API_URL + "files/" + id).subscribe(
      data =>
      {
        this.fileObservable = data;
        let contentType='text/csv';
        let blob = base64StringToBlob(this.fileObservable.fileContent, contentType);
        saveAs(blob, "test.csv",{ autoBOM: true });
      });
  }

Angular 7 File Saver 使用编码字节数组保存文件，而不是将其转换为 CSV 格式

Angular 7 File Saver saving file with encoded byte array instead of converting it to CSV format

angular

filesaver.js