Angular download base64 file data

Question

When I try to save on Angular a base64 file with this format :

// receivedFile.file = "data:image/jpeg;base64,/9j/4AAQSkZJR..."

var a = document.createElement('a');
const blob = new Blob([receivedFile.file], {type: receivedFile.infos.type});
a.href = URL.createObjectURL(blob);
a.download = receivedFile.infos.name;
a.click();

This code give me a corrupted file, how can I do ?

If your `receivedFile` is a string as the comment suggests - then what exactly do you think you are accessing with `receivedFile.infos.type` and `receivedFile.infos.name` here …? — CBroe, Jul 05 '21 at 12:11
Why create a new blob in the first place, if you already have a data URI? `a.href = receivedFile.file` should do the job already then, no? — CBroe, Jul 05 '21 at 12:42

Jeremy Thille · Accepted Answer · 2021-07-05T12:40:27.890

3

In Angular (and in general) I use file-saver :

import { saveAs } from 'file-saver';
const blob = new Blob([receivedFile], {type: receivedFile.infos.type});
FileSaver.saveAs(blob, receivedFile.infos.name);

Also, try to remove the data:image/jpeg;base64, part of the string :

receivedFile.file.replace("data:image/jpeg;base64," , "")

edited Jul 05 '21 at 12:40

answered Jul 05 '21 at 12:04

Jeremy Thille

25,196
9
41
59

Still the same problem. Maybe the receivedFile format is wrong ? – Galileoomega Jul 05 '21 at 12:13
1

Try removing `data:image/jpeg;base64,` from the beginning of the string – Jeremy Thille Jul 05 '21 at 12:13
1

@Galileoomega maybe try https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – boxdox Jul 05 '21 at 12:16
Ah nice, I have edited my answer, if you would be so kind as to mark it as accepted. – Jeremy Thille Jul 05 '21 at 12:40

score 0 · Answer 2 · answered Jul 05 '21 at 12:28

To resolve this problem :

Removed data:image/jpeg;base64 from the receivedFile.file.
Use the function atob(), const byteCharacters = atob(receivedFile.file);
Then make the blob const blob = new Blob([byteCharacters], {type: this.receivedFile.infos.type});

Angular download base64 file data

2 Answers2