CODEWITHSUNDEEP
javascriptfilebase64
Ikrom
Ikrom

Reputation: 5103

JavaScript: save base64 string as file

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.

Upvotes: 26

Views: 65715

Answers (4)

Nuno Ribeiro
Nuno Ribeiro

Reputation: 2555

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

Upvotes: 20

kerwal
kerwal

Reputation: 401

You can use download.js.

download(base64String, filename, mimeType)

Upvotes: 16

kerwal
kerwal

Reputation: 175

You can do this from js to download pdf.

Use:

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

Upvotes: 10

Kirk B.
Kirk B.

Reputation: 456

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.

Related SO on Content-Disposition

Upvotes: 1

Related Questions