javascript Howto decode file saved as base64 string and download it

Question

how must I decode base64 string and download file from base64 string? Previosly, I encoded a file with:

            var strEncoded="";
            file = $('#fileinput1')[0].files[0];

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                strEncoded = reader.result;
            };

Thank you

@GolezTrol doesn't seem to be PHP involved? – Feb 01 '17 at 12:16 — , Feb 01 '17 at 12:16

er-han · Answer 1 · 2017-02-01T12:22:58.237

1

You can create a <a> link and give the data to its href. For example i used a data/image base64 like this:

<a href="data:image/png;base64,iVBORw0K........" download>Download</a>

download attribute would do the work.

Or simply try this:

location.href = strEncoded;

And in a function:

download(dataUrl) {
  location.href = dataUrl;
}

<a href="javascript:;" onclick="download(strEncoded);">Download</a>

edited Feb 01 '17 at 12:22

answered Feb 01 '17 at 12:19

er-han

1,859
12
20

It's only run in chrome, not in IE – cardonchas Feb 01 '17 at 12:22
1

@cardonchas i see, IE is always a pain in the azz. I edited my post, can you try javascript version? – er-han Feb 01 '17 at 12:24
It's run in chrome, but not in IE – cardonchas Feb 01 '17 at 12:32
1

works for image but failed for a pdf file I used application/pdf as mime type of the base64 encoded data – Masroor Oct 14 '20 at 07:21

score 0 · Accepted Answer · answered Feb 01 '17 at 12:32

Don't use the b64 version, but instead go directly with the File object you've got from your input.

Up to date browsers do support anchor's download attribute, then you just have to do a.href = URL.createObjectURL(yourFile); a.download = 'yourfile.whateverExtension'.

For older browsers, there are a few hacks, all condensed in the great FileSaver.js library.

Then all you need to do is

var inp = document.querySelector('input');
inp.onchange = function(){
   saveAs(this.files[0], 'yourFile.extension');
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>
<input type="file"/>

javascript Howto decode file saved as base64 string and download it

2 Answers2