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 — evolutionxbox
– evolutionxbox, Commented Feb 14, 2017 at 12:30

Zakaria Acharki · Accepted Answer · 2017-02-14 16:19:56Z

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, 2017 at 16:19

answered Feb 14, 2017 at 12:12

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2017-02-14 12:11:51Z

1

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

answered Feb 14, 2017 at 12:11

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Sarah Groß · Accepted Answer · 2017-02-14 12:25:11Z

1

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').

answered Feb 14, 2017 at 12:25

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Comments

UJS · Accepted Answer · 2017-02-14 12:27:23Z

0

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>

answered Feb 14, 2017 at 12:27

UJS

8611 gold badge11 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related