WordPress AJAX导出CSV文件下载但不带扩展名

Question

在WordPress中，我想使用ajax生成CSV文件。基本上，当用户单击按钮时，它将发出ajax调用，在ajax php文件中，它将生成CSV并将其下载到用户系统。因此，我已经按照以下方式编写了代码。

我的标记如下：

<button type="button" class="btn export-csv" data-proj-id="1">Export CSV</button>

这段js代码如下

$('body').on('click', 'button.export-csv', function() {
    var proj_id = $(this).attr('data-proj-id');
    $.ajax({
        type:"POST",
        url:trans.ajaxUrl,
        data:'proj_id='+proj_id+'&action=export_client_price_csv',
        success: function (data) {
            var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(data);
      location.href = uri;
    }
    }); 
});

我的php代码如下所示。

function export_client_price_csv() {
    global $wpdb;
    $proj_id = $_POST['proj_id'];
    $user_id = get_current_user_id();
    $site_id = get_current_blog_id();
    if( !empty($proj_id) ) {
        $get_prices_data = $wpdb->get_results("SELECT * FROM `fl_client_price` WHERE `user_id` = ".$user_id." AND
        `project_id` = ".$proj_id." AND `site_id` = ".$site_id." AND `client_status` LIKE '%invoiced%' ");

        $data_array = array();
        if( count($get_prices_data) > 0 ) {
            foreach( $get_prices_data as $data ) {
                $array = get_object_vars($data);
                array_push($data_array, $array);
                convert_to_csv($data_array, 'report.csv', ',');
            }
        }
    }
    exit;
}
add_action( 'wp_ajax_export_client_price_csv', 'export_client_price_csv' );

function convert_to_csv($input_array, $output_file_name, $delimiter)
{
    /** open raw memory as file, no need for temp files, be careful not to run out of memory thought */
    $f = fopen('php://memory', 'w');
    /** loop through array  */
    foreach ($input_array as $line) {
        /** default php csv handler **/
        fputcsv($f, $line, $delimiter);
    }
    /** rewrind the "file" with the csv lines **/
    fseek($f, 0);
    /** modify header to be downloadable csv file **/
    header('Content-Type: text/html; charset=UTF-8');
    //header('Content-Type: application/csv');
    header('Content-Disposition: attachement; filename="' . $output_file_name . '";');
    /** Send file to browser for download */
    fpassthru($f);
}

当我点击按钮时，它会下载文件，但没有.csv扩展名。我不知道这里发生了什么。

有人能告诉我如何解决这个问题吗？

- NewUser

---

同样的问题。你有任何答案吗？ - huykon225

Answer 1

看起来使用 location.href 或 window.location.href 没有指定文件名和扩展名的方法。

如果您模拟一个锚点单击，可以指定文件名和扩展名：

var csvdata = "Hello World"; //  only for test
var byteNumbers = new Uint8Array(csvdata.length);

for (var i = 0; i < csvdata.length; i++)
{
    byteNumbers[i] = csvdata.charCodeAt(i);
}
var blob = new Blob([byteNumbers], {type: "text/csv"});

// Construct the uri
var uri = URL.createObjectURL(blob);

// Construct the <a> element
var link = document.createElement("a");
link.download = 'myfile.csv';
link.href = uri;

document.body.appendChild(link);
link.click();

// Cleanup the DOM
document.body.removeChild(link);
delete link;

请看这里：如何在window.location.href中指定CSV文件名进行下载

- PedroClemo