HTML表格转CSV后法语重音等特殊字符乱码修复方案

特殊字符乱码是两个核心问题共同导致的：

1. 生成的CSV文件缺少UTF-8 BOM头，主流表格软件（比如Excel）打开无BOM的UTF-8文件时，会默认调用系统本地编码解析，UTF-8编码的法语重音字符为多字节结构，会被误拆成多个单字节字符显示，就会出现Région变成Région的情况。
2. 现有CSV转换逻辑没有遵循CSV格式规范，未转义字段内的逗号、换行、双引号，碰到这类内容会直接出现错列问题。
   另外虽然已经配置了HTML和数据库的字符集，但没有显式设置PHP和MySQL连接层的字符集，存在隐式转码导致乱码的隐患。

1. 补全PHP侧的字符集与输出配置 #

在PHP完成MySQL连接后，立刻显式设置连接字符集为utf8mb4，杜绝连接层隐式转码，不要依赖数据库默认配置：

// 以mysqli扩展为例
$dbConnection->set_charset('utf8mb4');
// 如果使用已废弃的mysql扩展，执行：mysql_query("SET NAMES utf8mb4");

同时优化PHP渲染表格的逻辑，用htmlspecialchars转义输出的字段值，避免特殊字符破坏HTML结构，也能防范XSS风险：

while ($row = $result->fetch_assoc()) {
    echo('<tr>');
    echo '<td>'.htmlspecialchars($row["Rang"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Pays"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Region"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Documents"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Documents_citables"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Citations"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Autocitations"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Citations_par_document"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Indiceh"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Discipline"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Sous_discipline"]).'</td>';
    echo '<td>'.htmlspecialchars($row["Annee"]).'</td>';
    echo( '</tr>');
}

2. 重写JS侧的CSV导出逻辑 #

核心修改点：在CSV内容头部添加UTF-8 BOM头\uFEFF，按CSV标准转义特殊字段，显式指定Blob编码，补全内存清理逻辑：

function exportTableToCSV(filename) {
    const csvContent = [];
    // 直接通过表格id选中目标表格，避免抓取页面其他表格内容
    const tableRows = document.querySelectorAll("#Elements tr");
    // 写入UTF-8 BOM头，让表格软件正确识别编码
    csvContent.push('\uFEFF');

    for (let i = 0; i < tableRows.length; i++) {
        const rowData = [];
        const cells = tableRows[i].querySelectorAll("td, th");
        for (let j = 0; j < cells.length; j++) {
            let cellText = cells[j].innerText.replace(/"/g, '""');
            // 字段包含逗号、换行、双引号时，按CSV标准用双引号包裹
            if (cellText.includes(',') || cellText.includes('\n') || cellText.includes('"')) {
                cellText = `"${cellText}"`;
            }
            rowData.push(cellText);
        }
        csvContent.push(rowData.join(","));
    }

    downloadCSV(csvContent.join("\n"), filename);
}

function downloadCSV(csv, filename) {
    // 显式指定文件类型和编码
    const csvBlob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const downloadLink = document.createElement("a");

    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvBlob);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理临时DOM节点和对象URL，避免内存泄漏
    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadLink.href);
}

页面上的导出按钮不需要修改，原有点击绑定逻辑可以正常运行。

• 如果需要兼容IE10及更早版本的浏览器，可以在downloadCSV函数里增加分支判断，调用navigator.msSaveBlob(csvBlob, filename)实现下载，现代Chrome、Firefox、Edge浏览器不需要额外处理。
• 导出后可以先用系统记事本打开CSV文件验证，如果记事本里法语重音字符显示正常，再用Excel打开也不会出现乱码。

修复完成后，原有的Région类乱码会自动恢复为正常的Région，字段内包含逗号、换行的内容也不会出现错列问题。

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