.NET 8 Blazor Server用jitbit/CsvExport导出CSV首列现异常字符

问题原因分析 #

你看到的»¿是UTF-8 BOM（字节顺序标记）被错误解析后的显示结果，核心问题出在C#与JS的参数传递不匹配，以及编码处理逻辑错误：

1. 你的C#代码直接传递byte[]给JS函数，但JS函数却将其当作Base64字符串解码，导致二进制数据被错误解析为文本字符。
2. 默认情况下，CsvExport的ExportAsMemoryStream使用带BOM的UTF-8编码，若JS端未正确处理，BOM字节会被当作内容显示。

修复方案 #

方案1：修正JS函数，直接处理二进制数组 #

修改你的JS函数，直接接收C#传递的Uint8Array，并创建正确的CSV Blob：

function saveAsFile(filename, bytes) {
    // 创建带UTF-8编码的CSV Blob
    const blob = new Blob([bytes], { type: 'text/csv;charset=utf-8' });
    
    if (navigator.msSaveBlob) {
        // IE/Edge兼容
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        // 释放URL对象，避免内存泄漏
        URL.revokeObjectURL(link.href);
    }
}

同时确保C#代码调用正确的JS方法名：

private async Task ExportToCSV()
{
    var myExport = new CsvExport(includeColumnSeparatorDefinitionPreamble: false, includeHeaderRow: false);

    // 表头与数据行添加逻辑保持不变...

    var csvBytes = myExport.ExportAsMemoryStream().ToArray();
    // 调用JS的saveAsFile方法
    await _js.InvokeVoidAsync("saveAsFile", "ProMilesTrip.csv", csvBytes);
}

方案2：移除UTF-8 BOM编码 #

如果不需要BOM，可以在导出时使用不带BOM的UTF-8编码生成字节数组：

private async Task ExportToCSV()
{
    var myExport = new CsvExport(includeColumnSeparatorDefinitionPreamble: false, includeHeaderRow: false);

    // 表头与数据行添加逻辑保持不变...

    // 获取CSV字符串，再转换为不带BOM的UTF-8字节
    var csvContent = myExport.Export();
    var csvBytes = new System.Text.UTF8Encoding(false).GetBytes(csvContent);
    
    await _js.InvokeVoidAsync("saveAsFile", "ProMilesTrip.csv", csvBytes);
}

搭配方案1中的修正版JS函数使用即可。

方案3：修正Base64传递逻辑（若坚持用原JS函数） #

如果要保留原JS的Base64处理逻辑，需在C#中将byte[]转换为Base64字符串后传递：

private async Task ExportToCSV()
{
    var myExport = new CsvExport(includeColumnSeparatorDefinitionPreamble: false, includeHeaderRow: false);

    // 表头与数据行添加逻辑保持不变...

    var csvBytes = myExport.ExportAsMemoryStream().ToArray();
    var base64String = Convert.ToBase64String(csvBytes);
    await _js.InvokeVoidAsync("saveAsFile", "ProMilesTrip.csv", base64String);
}

同时修改JS函数的MIME类型为CSV，避免浏览器按二进制解析：

function saveAsFile(filename, bytesBase64) {
    if (navigator.msSaveBlob) {
        var data = window.atob(bytesBase64);
        var bytes = new Uint8Array(data.length);
        for (var i = 0; i < data.length; i++) {
            bytes[i] = data.charCodeAt(i);
        }
        // 修改MIME类型为CSV
        var blob = new Blob([bytes.buffer], { type: "text/csv;charset=utf-8" });
        navigator.msSaveBlob(blob, filename);
    }
    else {
        var link = document.createElement('a');
        link.download = filename;
        // 修改MIME类型为CSV
        link.href = "data:text/csv;charset=utf-8;base64," + bytesBase64;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

验证效果 #

修改后重新导出CSV，打开后首行的»¿乱码字符应该会消失，表头与数据正常显示。

内容的提问来源于stack exchange，提问作者Mardymar68