如何修改JS代码使CSV的每个<td>值对应Excel单个单元格？

问题根源 #

1. 原代码使用制表符\t分隔字段，但Excel默认以逗号作为CSV的字段分隔符，导致所有内容被识别为单个单元格。
2. 未处理字段中的特殊字符（逗号、双引号、换行），会破坏CSV格式。
3. 获取输入框值的逻辑错误：td.value无法读取<td>内部<input>的内容。

修改方案 #

1. 修正单元格数据提取逻辑

将原代码中读取<input>值的部分替换为正确获取内部输入框的逻辑：

cells.forEach(function(td){
    // 处理包含input的单元格
    const input = td.querySelector('input');
    if(input) {
        d.push(input.value.trim());
    }
    // 处理纯文本单元格
    else if(td.textContent.trim() !== ""){
        d.push(td.textContent.trim());
    }
    // 处理空白单元格
    else{
        d.push("");
    }
});

2. 添加CSV字段转义函数

为兼容特殊字符，对每个字段进行转义处理：

// 转义CSV字段：包含逗号、引号或换行时用双引号包裹，内部引号转义为两个引号
function escapeCsvField(field) {
    if (typeof field !== 'string') field = String(field);
    // 字段包含特殊字符时需要包裹
    if (field.includes(',') || field.includes('"') || field.includes('\n') || field.includes('\r')) {
        // 转义内部双引号
        return `"${field.replace(/"/g, '""')}"`;
    }
    return field;
}

3. 修正CSV生成逻辑

将制表符分隔改为逗号分隔，并应用转义函数：

// 替换原CSV生成代码
let csvData = data.map(row => row.map(escapeCsvField).join(',')).join('\r\n');

修改后的完整MakeCSV函数 #

const MakeCSV = () => {
    let data = [];
    let table = document.getElementById('ENJP');
    let tbl_tr = table.querySelectorAll('tr');

    tbl_tr.forEach(function(tr){
        let cells = tr.querySelectorAll('td');
        if (cells.length !== 0){
            let d =[];
            cells.forEach(function(td){
                const input = td.querySelector('input');
                if(input) {
                    d.push(input.value.trim());
                }
                else if(td.textContent.trim() !== ""){
                    d.push(td.textContent.trim());
                }
                else{
                    d.push("");
                }
            });
            data.push(d);
        }
    });

    // CSV字段转义函数
    function escapeCsvField(field) {
        if (typeof field !== 'string') field = String(field);
        if (field.includes(',') || field.includes('"') || field.includes('\n') || field.includes('\r')) {
            return `"${field.replace(/"/g, '""')}"`;
        }
        return field;
    }

    let bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    let csvData = data.map(row => row.map(escapeCsvField).join(',')).join('\r\n');
    let blob = new Blob([bom, csvData], {'type' : 'text/csv;charset=utf-8'});

    let downloadLink = document.createElement('a');
    downloadLink.download = (document.getElementById("FileName").value || "book_list") + '.csv';
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.dataset.downloadurl = ['text/csv', downloadLink.download, downloadLink.href].join(':');
    downloadLink.click();
    console.log(data);
    return window.alert("导出完成")
}

额外优化 #

• 为文件名添加默认值，避免空文件名的情况。
• 修正Blob的MIME类型为text/csv;charset=utf-8，提升兼容性。

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