在 JavaScript 中创建的元素中触发点击并下载 CSV 文件

Question

我试图创建一个`a`元素，并在其上触发点击事件，在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();
        });
    });

这段代码没有错误，但是也没有下载。

- af_inb

---

只需要使用.click()就可以工作了 - Zakaria Acharki

可能是模拟点击以触发onclick方法的假操作的重复问题。 - evolutionxbox

Answer 1

通过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')。

- Constantin Groß

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

这需要一个支持下载属性的浏览器。

- adeneo

Answer 3

不要在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();

- Zakaria Acharki

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

- UJS