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

26,047
12
43
63

Still the same problem. Maybe the receivedFile format is wrong ? – 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

sateesh · Answer 2 · 2022-11-14T17:09:53.187

Here is the code which converts base64 to downloadable file format in angular.

If for example your file type is csv, then below is the code snippet

downloadFile(base64:any,fileName:any){
const src = `data:text/csv;base64,${base64}`;
const link = document.createElement("a")
link.href = src
link.download = fileName
link.click()

link.remove()
}

//calling above function with some sample base64 data
downloadFile("c21hbGxlcg==","demo.csv")

Note: The file type can be anything you can give based on the need(In src of above code snippet).Here I am considering the csv file as example.

So by calling this above function You can download the resultant file will be downloaded from browser.

score 0 · Answer 3 · 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});

score 0 · Answer 4 · answered Dec 01 '22 at 22:51

0

try this

const downloadLink = document.createElement('a');
const fileName = 'sample.pdf';
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();

answered Dec 01 '22 at 22:51

Olagoke Mills

67
5
8

Angular download base64 file data

4 Answers4