File is not being downloaded when requested through Ajax using JQuery

Question

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.

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

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

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

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

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.

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

Answer 1

I would recommend you create the CSV at server side PHP program and set Content-Type as "application/vnd.ms-excel" (or) "text/csv" and set "Content-Disposition: attachment; [yourfilename] "

Refer this Create a CSV File for a user in PHP

Refer this Force Download CSV File

Simply put hyperlink as

<a class="areaSummaryExport" href="admin_ajax.php" value="1">...</a>