JavaScript: save base64 string as file

Question

I have a base64 string, file type. File type can be image, text or even pdf. I need to show download link and when user clicks it should start downloading as expected file.
Concisely, server sends me file as base64 string, and I need to save it as file on browser. How can I save base64 string as file on browser? It would be best if solution works on IE9 also.

score 17 · Answer 1 · edited Jun 06 '21 at 22:18

17

Adapted from https://gist.github.com/RichardBray/23decdec877c0e54e6ac2bfa4b0c512f to work on Firefox.

function downloadBase64File(contentBase64, fileName) {
    const linkSource = `data:application/pdf;base64,${contentBase64}`;
    const downloadLink = document.createElement('a');
    document.body.appendChild(downloadLink);

    downloadLink.href = linkSource;
    downloadLink.target = '_self';
    downloadLink.download = fileName;
    downloadLink.click(); 
}

edited Jun 06 '21 at 22:18

Luis Lobo

489
4
7

answered Sep 05 '19 at 11:46

Nuno Ribeiro

2,487
2
26
29

There's a syntax error here: a "function" keyword is missing. – Anderson Green Sep 20 '20 at 17:55
4

The file starts to download then I get a "Failed - Network error" – MadMac Jul 11 '22 at 00:52
@MadMac I had the same error. I had entered the wrong url. The correct format is "data:[fileMimeType];base64,[base64Content]" – danielevigi Jul 06 '23 at 06:38

score 16 · Answer 2 · edited Oct 12 '15 at 19:56

16

You can use download.js.

download(base64String, filename, mimeType)

edited Oct 12 '15 at 19:56

Jacob

77,566
24
149
228

answered Oct 12 '15 at 08:48

kerwal

391
3
5

That being said, this helped me the most of any answers. +1 – aks. Dec 24 '16 at 19:15
This opens a 'save file as' dialog for me. Can't it automatically save the image? – nclsvh Apr 25 '18 at 15:44
@nclsvh, this part is up to your browser. It may be configured to ask you any time or not. – ConductedClever Apr 13 '19 at 12:09

score 10 · Answer 3 · edited Oct 07 '15 at 08:56

10

You can do this from js to download pdf.

Use:

document.location = 'data:application/pdf;base64,' + base64String

edited Oct 07 '15 at 08:56

shapiro yaacov

2,308
2
26
39

answered Oct 07 '15 at 08:15

kerwal

165
1
3

I think, in a SPA or a full ajax scenario, not opening another tab or not leaving current behavior is more suitable. – ConductedClever Apr 13 '19 at 12:10
This resulted in `Not allowed to navigate top frame to data URL: data:image/jpeg;base64, ...`. Unlike the OP, I tried to convert `base64String` into a jpeg file instead of PDF, which might cause this issue – Hiroki Oct 30 '22 at 08:49

score 1 · Answer 4 · edited May 23 '17 at 12:24

You get the effect you desire (web page showing a link, and when user clicks, the save as dialog pops up) when the appropriate response headers are present when the browser requests the resource:

Content-Disposition: attachment; filename="yourfilename.extension"

If you're getting the file from the server as a base64 string embedded in your html, perhaps you can skip the embedding and simply embed a direct link to the file on your server, having the server serve it up to the user.

JavaScript: save base64 string as file

4 Answers4

Linked

Related