Trigger click n a element created in javascript and download csv file

Question

I'm trying to create an a element and trigger click event on it and down load a csv file on ajax response( the data array its for test purposes only)

$(document).on('click','.csv',function(){

        var ticketid = $(this).attr('data-ticket'); 
        $.ajax({
          url: window.location.href,
          method:'POST',
          data: {
            action:"export-csv",
            ticketid: ticketid
          },
        }).done(function(response){
            var data = [
               ['Foo', 'programmer'],
               ['Bar', 'bus driver'],
               ['Moo', 'Reindeer Hunter']
            ];
            var response_object = $.parseJSON(response.html);
            var result = toArray(response_object);
            var csv = 'Name,Title\n';
            data.forEach(function(row) {
                    csv += row.join(',');
                    csv += "\n";
            });
            console.log( encodeURI(csv));
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
            hiddenElement.target = '_blank';
            hiddenElement.download = 'data.csv';
            hiddenElement.click();
        });
    });

With this code there is no error but there is not download too.

Possible duplicate of [Fake "click" to activate an onclick method](http://stackoverflow.com/questions/347512/fake-click-to-activate-an-onclick-method) — evolutionxbox, Feb 14 '17 at 12:30

score 1 · Answer 1 · answered Feb 14 '17 at 12:11

Plain javascript doesn't have a trigger() method, only jQuery does.

To trigger a click you'd just do

hiddenElement.click();

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI('John,2018,House,312,3.75');
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

This does require a browser that supports the download attribute

Zakaria Acharki · Accepted Answer · 2017-02-14T16:19:56.113

1

Don't use trigger() on DOM object since it's a jQuery method, just .click() should do the work, Check the working example below :

 hiddenElement.click();

Hope this helps.

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8, ABCD';
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

edited Feb 14 '17 at 16:19

answered Feb 14 '17 at 12:12

Zakaria Acharki

66,747
15
75
101

score 1 · Answer 3 · answered Feb 14 '17 at 12:25

Triggering the click event of a link in via JS does not work - at least in Firefox (probably some kind of "security" restriction?). You'll have to create your own event and fire that:

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI('foo,bar,baz,42');
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
hiddenElement.dispatchEvent(event, true);

Depending on which browsers you need to support, you might have to do a feature detection for older browsers (IE), checking for document.createEventObject, then using hiddenElement.fireEvent('onclick').

score 0 · Answer 4 · answered Feb 14 '17 at 12:27

You Must Use SetAttribute Method :

<script>
        var hiddenElement = document.createElement('a');
        hiddenElement.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURI(csv));
        hiddenElement.setAttribute("download", 'aaa.csv');
        hiddenElement.setAttribute("click", "DownloadFile(this)");

        function DownloadFile(e) {
            // Do Logic code here ..
        }
    </script>

Trigger click n a element created in javascript and download csv file

4 Answers4