dispatchEvent doesn't work in javascript with Internet explorer 11

Question

In my website I have a javascript in which I wish to open a file save dialog. The purpose is to save in a text file some data that are coming from the web server.

I am trying to use the code snippet shown in this post:

[Using HTML5/JavaScript to generate and save a file

And to be precise:

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

This works great for Firefox and Chrome. However with Internet Explorer 11 it doesn't work. When this instruction is executed...

pom.dispatchEvent(event);

...nothing happens. The save dialog is not opened, and no error is shown in the java console of the browser. The event seems to get lost in the void. Any help would be greatly appreciated.

score 0 · Answer 1 · answered May 28 '20 at 16:01

0

This is widely supported in modern browser. However,

Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method.

Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

answered May 28 '20 at 16:01

ABGR

4,631
4
27
49

score 0 · Answer 2 · answered May 28 '20 at 16:40

Your code works fine for me in Internet Explorer 11.836.18362.0, however with that said, MDN advises not to use the technique you are using. createEvent and initEvent are depricated, can have unpredictable results and may be dropped at any time. Use Event() instead. See initEvent and createEvent MDN doc pages.

Deepak-MSFT · Answer 3 · 2020-05-29T02:18:32.467

I tried to test the issue on my side and I can see that file is not getting download in the IE 11 browser.

Below is the modified code that you can use for the IE and other browsers. It will download the file properly.

<!doctype html>
<html>
<head>
<script>
function download(data, filename, type) 
{
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) 
    {
        window.navigator.msSaveOrOpenBlob(file, filename);
    }
    else 
    {   var pom = document.createElement('a');
        pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
        pom.setAttribute('download', filename);

        if (document.createEvent) 
        {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);
        }
        else 
        {
            pom.click();
        }
    }
}
download('Hello world!','test.txt','text/plain');
</script>
</head>
<body>
<h2>Refresh the page</h2>
</body>
</html>

Output in the IE 11 browser:

dispatchEvent doesn't work in javascript with Internet explorer 11

3 Answers3