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

Question

I am using file saver on Angular 7 to save CSV file returned from Spring Boot backend. Spring Boot returns CSV File object with some properties i.e name, size, type, and file content in a byte array format. When I open save page, File Saver saving file with byte array text instead of converting to CSV format and saving it to the file.

getFileContent

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 });
      });
  }

Rest API:

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

I think Angular 7 converting byte input to Base64 format. Does anyone know how to prevent this? — Pavan Jadda
– Pavan Jadda, Commented Jan 22, 2019 at 18:31

Pavan Jadda · Accepted Answer · 2019-10-25 03:54:43Z

3

Part of the issue was with Base64 conversion by Angular. When byte[] data received from Spring, Angular converting it to Base64 string. I used blob-util to convert Base64 string to byte[] and then passed it to File-Saver. Updated code as follows

getFileContent

 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 });
      });
  }

edited Oct 25, 2019 at 3:54

answered Jan 22, 2019 at 18:52

Pavan Jadda

4,97112 gold badges52 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alejandro Over a year ago

thank you! I was having trouble with something similar and this solved my issue, I owe you a beer.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related