Creating csv file offline (client-side) in Internet Explorer

Question

Is there a way to create a CSV file using pure JavaScript (offline, locally) and downloading that file to the local file system? The approach should work in IE9 or lower.

I have tried downloadify, but cross-domain issues prevented me from using it locally. I also tried creating a Base64 encoded string and issuing a text/csv data URI, but IE doesn't appear to support data URIs for that particular case.

You would be able to do this in client-side VBScript in IE. Although, security settings would need to be changed to allow this. — Lee Taylor, Nov 20 '12 at 00:41
Please take a look at this my answer: http://stackoverflow.com/a/9686960/1169519 . — Teemu, Nov 20 '12 at 05:56
@Teemu I will definitely give that a try tomorrow, it looks like with a little browser/feature detection I will be able to use both the HTML5 file api and the HTA to have a cross-browser compatible local app! — Moses, Nov 20 '12 at 06:26

score 5 · Answer 1 · answered Jun 18 '14 at 12:23

If you want to open the csv in excel 2013 with correct utf8, you should add utf8 bom to dinesh ygv code like this:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = ['\ufeff'+str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8,%EF%BB%BF" + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

dinesh ygv · Answer 2 · 2013-12-27T06:58:29.957

1

The following method works in IE11+, Firefox 25+ and Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

See this in action: JS Fiddle

Firefox and Chrome support data URI for navigation, which allows us to create files by navigating to a data URI, while IE doesn't support it for security purposes.

On the other hand, IE has API for saving a blob, which can be used to create and download files.

edited Dec 27 '13 at 06:58

answered Dec 27 '13 at 06:52

dinesh ygv

1,840
1
14
18

I just tested it out on IE 11 and it is not working. Chrome and Firefox working – D. Rattansingh Jun 21 '14 at 13:46
The new update for IE11 probably disabled saving a Blob from IFrame and JSFiddle runs the page through an iframe. But, this will still work on a normal page. See the JSFiddle demo page for the above example here: http://jsfiddle.net/Kg7eA/show/ – dinesh ygv Jun 22 '14 at 18:05
see http://stackoverflow.com/questions/21893463/javascript-to-download-string it worked beautifully on IE. Just renamed the file with .csv extension and push formatted csv data into it. I'm seriously considering telling my clients that my prerequisite is no IE – D. Rattansingh Jun 23 '14 at 07:26

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

For security reasons, no, it's not possible to create a file locally and save it to the user's file system. JavaScript simply doesn't allow it. The file will need to be created server side and the user will need to download it.

Edit: Actually, you can access the local file system using HTML5, but it appears IE9 doesn't support the File API.

edited May 23 '17 at 12:34

Community

1
1

answered Nov 20 '12 at 00:38

Display name

1,109
1
15
31

score 0 · Answer 4 · edited May 23 '17 at 10:33

You can use the data links for non-IE browsers, then fall back to an IFrame with document.execCommand for Internet Explorer.

I have more details here: https://stackoverflow.com/a/26003382/378151

I've tested it on IE9-IE11. I don't know what the compatibility is below that, and it seems like no one else really knows either. If I were to guess, I'd wager that IE 8 supports this and IE 6 & 7 is where it gets flaky.

Creating csv file offline (client-side) in Internet Explorer

4 Answers4

Linked