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.
Add a comment |
4 Answers
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(); }
3 Comments
Anderson Green
There's a syntax error here: a "function" keyword is missing.
MadMac
The file starts to download then I get a "Failed - Network error"
danielevigi
@MadMac I had the same error. I had entered the wrong url. The correct format is "data:[fileMimeType];base64,[base64Content]"
You can use download.js.
download(base64String, filename, mimeType) 
3 Comments
aks.
That being said, this helped me the most of any answers. +1
nclsvh
This opens a 'save file as' dialog for me. Can't it automatically save the image?
ConductedClever
@nclsvh, this part is up to your browser. It may be configured to ask you any time or not.
You can do this from js to download pdf.
Use:
document.location = 'data:application/pdf;base64,' + base64String
2 Comments
ConductedClever
I think, in a SPA or a full ajax scenario, not opening another tab or not leaving current behavior is more suitable.
Hiroki
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 issueYou 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.
