触发单击在 javascript 中创建的元素并下载 csv 文件答案

【问题标题】：Trigger click n a element created in javascript and download csv file触发单击在 javascript 中创建的元素并下载 csv 文件
【发布时间】：2017-02-14 12:10:17
【问题描述】：

我正在尝试创建一个元素并在其上触发点击事件并在 ajax 响应上下载一个 csv 文件（数据数组仅用于测试目的）

$(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();
        });
    });

使用此代码没有错误，但也没有下载。

【问题讨论】：

只需 .click() 就可以了
Fake "click" to activate an onclick method的可能重复

标签： javascript jquery csv

【解决方案1】：

不要在 DOM 对象上使用 trigger()，因为它是一个 jQuery 方法，只需 .click() 就可以了，请查看下面的工作示例：

 hiddenElement.click();

希望这会有所帮助。

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

【讨论】：

【解决方案2】：

普通 javascript 没有 trigger() 方法，只有 jQuery 有。

要触发您只需执行的点击

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();

这需要支持download 属性的浏览器

【讨论】：

【解决方案3】：

通过 JS 触发链接的点击事件不起作用 - 至少在 Firefox 中（可能是某种“安全”限制？）。您必须创建自己的事件并触发它：

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);

根据您需要支持的浏览器，您可能需要对旧版浏览器 (IE) 进行功能检测，检查document.createEventObject，然后使用hiddenElement.fireEvent('onclick')。

【讨论】：

【解决方案4】：

你必须使用SetAttribute方法：

<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>

【讨论】：