JavaScript导出数据到CSV文件：如何移除行首逗号

现有用于导出表格为CSV的JavaScript代码：

// Variable to store the final csv data
var csv = [];
// Get each row data
var rows = document.querySelectorAll("table tr");
// Get each column data
for(var i = 1; i < rows.length; i++){
        // Stores each csv row data
        var row = [], cols = rows[i].querySelectorAll("td,th");
        for(var j = 0; j < cols.length; j++){
            // Get the text data of each cell
            // of a row and push it to csvrow
            row.push('"' + cols[j].innerText.trim() + '"');                
        }
        // Combine each column value with comma
        csv.push(row.join(",") + "\n");
}

导出的CSV出现行首多余逗号的问题：

"Host","Version","Country","Brand","Store"
,"test1","5.2","MX","brand","1234"
,"test2","5.2","CA","brand","4321"
,"test3","5.2","US","brand","4444"

期望输出：

"Host","Version","Country","Brand","Store"
"test1","5.2","MX","brand","1234"
"test2","5.2","CA","brand","4321"
"test3","5.2","US","brand","4444"

原因分析 #

行首出现逗号，是因为数据行的第一个单元格内容为空（trim后无有效文本），代码将其处理为""，最终row.join(",")时会在开头生成逗号。

修复方案 #

方案1：过滤空单元格内容 #

在生成row数组时，跳过空内容的单元格，避免空字符串被加入数组：

// Variable to store the final csv data
var csv = [];
// Get each row data
var rows = document.querySelectorAll("table tr");
// Get each column data
for(var i = 1; i < rows.length; i++){
        // Stores each csv row data
        var row = [], cols = rows[i].querySelectorAll("td,th");
        for(var j = 0; j < cols.length; j++){
            var cellText = cols[j].innerText.trim();
            // 仅添加非空的单元格内容
            if (cellText) {
                row.push('"' + cellText + '"');                
            }
        }
        // Combine each column value with comma
        csv.push(row.join(",") + "\n");
}

方案2：移除行首的空元素 #

如果需要保留列数对应关系，仅移除行首的空元素：

// Variable to store the final csv data
var csv = [];
// Get each row data
var rows = document.querySelectorAll("table tr");
// Get each column data
for(var i = 1; i < rows.length; i++){
        // Stores each csv row data
        var row = [], cols = rows[i].querySelectorAll("td,th");
        for(var j = 0; j < cols.length; j++){
            row.push('"' + cols[j].innerText.trim() + '"');                
        }
        // 移除第一个空元素（如果是""）
        if (row[0] === '""') {
            row.shift();
        }
        // Combine each column value with comma
        csv.push(row.join(",") + "\n");
}

补充：自动包含表头行 #

原代码跳过了表头行（i从1开始），如果需要自动导出表头，可将循环起始改为i=0：

// Variable to store the final csv data
var csv = [];
// Get each row data
var rows = document.querySelectorAll("table tr");
// Get each column data
for(var i = 0; i < rows.length; i++){ // 从0开始包含表头
        var row = [], cols = rows[i].querySelectorAll("td,th");
        for(var j = 0; j < cols.length; j++){
            var cellText = cols[j].innerText.trim();
            if (cellText) {
                row.push('"' + cellText + '"');                
            }
        }
        csv.push(row.join(",") + "\n");
}

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