当通过使用JQuery的Ajax请求的文件不被下载不被、文件、JQuery、Ajax

2023-09-11 22:35:12 作者：虚情假意，一败涂地ゅ

我需要下载与网站的某些信息.CSV文件，所以我使用了一个链接和一些JavaScript / jQuery来获取从servr表和创建文件。

I need to download a .CSV file with certain information from a website, so I'm using a link and some Javascript/JQuery to get the table from the servr and create the file.

我有这个链接，应该点击时要下载的文件： ＆LT;一类=areaSummaryExport值=1＆GT; ...＆LT; / A＆GT;

I have this link that is supposed to download the file when clicked: <a class="areaSummaryExport" value="1">...</a>

然后，我有这样的一个JS文件：

And then I have this in a JS file:

这增加了点击监听器的链接：

This adds the click listener to the link:

$('.areaSummaryExport').on('click', function(){
    exportAreaSummary($(this).attr('value'), $(this));
});

这个函数获取表使用一个Ajax请求的服务器，并将其发送到相应的函数来处理：

This function gets the table from the server using an ajax request and sends it to the corresponding function to process:

function exportAreaSummary(selected, sender){
    $.ajax({
        url: 'admin_ajax.php',
        method: 'get',
        dataType: 'json',
        data: {action: 'exportAreaSummary', area: selected}
    }).done(function(data){
        console.log('done');
        exportTableToCSV.apply(sender, [$($(data.table)[0]), data.name, data.header]);
    }).error(function(XMLHttpRequest){
        console.log('error');
        console.log(XMLHttpRequest);
    });
}

最后，此函数将的href 属性与文件信息的链接下载：

Finally this function adds the href attribute to the link with the information of the file to download:

function exportTableToCSV($table, filename, header) {
    console.log('printing');
    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // Temporary delimiter characters unlikely to be typed by keyboard
        // This is to avoid accidentally splitting the actual contents
        tmpColDelim = String.fromCharCode(11), // vertical tab character
        tmpRowDelim = String.fromCharCode(0), // null character

        // actual delimiter characters for CSV format
        colDelim = '","',
        rowDelim = '"\r\n"',

        // Grab text from table into CSV formatted string
        csv = '"' + 'sep=,' + rowDelim +
        (header? header.join(colDelim) + rowDelim : '') +
        $rows.map(function (i, row) {
            var $row = $(row),
                $cols = $row.find('td, th');

            return $cols.map(function (j, col) {
                var $col = $(col),
                    text = $col.text();

                return text.replace(/"/g, '""'); // escape double quotes

            }).get().join(tmpColDelim);

        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim) + '"',

        // Data URI
        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
    $(this)
        .attr({
        'download': filename,
            'href': csvData,
            'target': '_blank'
    });
    console.log('printed');
}

的问题是，它得到了CSV文件中的信息并将其添加到链接中的的href 属性，但它不会下载的文件（我有再次点击为它工作）。

The problem is that it gets the info for the CSV file and adds it in the href attribute in the link, but it won't download the file (I have to click again for it to work).

我知道最后一个函数的作品，因为我用它在其他地方，但我已经在屏幕上的表，没有阿贾克斯参与。所以我猜这个问题是与阿贾克斯，但不知道在哪里。

I know the last function works because I use it somewhere else, but there I already have the table on the screen so there's no ajax involved. So I'm guessing the problem is with the ajax, but not sure where.

我也试过烧透JS click事件，但它并不能工作。

I also tried firing the click event through JS but it doesn't work either.

当通过使用JQuery的Ajax请求的文件不被下载不被、文件、JQuery、Ajax

推荐答案