php - 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 。我不知道这里发生了什么。谁能告诉我如何解决这个问题？

Answer 1

看起来无法使用 location.href 或 window.location.href 指定 filename.extension。

如果您改为模拟 anchor 点击，则可以指定 filename.extension:

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;

参见此处:how to specify csv file name for downloading in window.location.href