如何使用JavaScript实现HTML表格指定列导出为Excel的功能

以下两种调整方案对应你之前尝试的两种实现思路，均可实现指定列导出需求：

方案1：调整原有CSV导出逻辑 #

原有CSV方案的核心问题：

• 错误使用.xls作为后缀，但实际内容是逗号分隔的纯文本，Excel打开时不会自动拆分列
• 未添加UTF-8 BOM头，容易出现中文乱码
• 没有做指定列的过滤逻辑

调整后代码：

// 入参cols为要导出的列索引数组，列索引从0开始计数：0=Index、1=Age、2=Gender、3=Height
// 示例：导出Age和Gender列传[1,2]，导出Gender和Height列传[2,3]
function exportData(cols = [1,2]) {
    const table = document.getElementById("tblStocks");
    const rows = [];
    // 遍历表格所有行
    for(let i=0, row; row = table.rows[i]; i++){
        const currRow = [];
        // 仅提取指定列的内容
        cols.forEach(colIndex => {
            currRow.push(row.cells[colIndex].innerText.trim());
        });
        rows.push(currRow);
    }
    // 加UTF-8 BOM头避免乱码，用制表符分隔兼容性更好
    let csvContent = "data:text/csv;charset=utf-8,%EF%BB%BF";
    rows.forEach(rowArray => {
        // 用制表符分隔避免内容含逗号时拆分错误
        const row = rowArray.join("\t");
        csvContent += row + "\r\n";
    });
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    // 用csv后缀更规范，Excel可正常打开并自动拆分列
    link.setAttribute("download", "Report_Result.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

方案2：调整XLSX库导出逻辑 #

原有XLSX方案直接将全量表格转为工作簿，没有做列过滤，调整后先把表格转成JSON，筛选指定列后再生成Excel文件。
调整后代码：

// 入参cols为要导出的列名数组，需和表格表头完全一致
// 示例：导出Age和Gender列传['Age','Gender']，导出Gender和Height列传['Gender','Height']
function ExportToExcel(cols = ['Age','Gender'], type = 'xlsx', fn, dl) {
    const elt = document.getElementById('tblStocks');
    // 先将全量表格转为JSON数组
    const jsonData = XLSX.utils.table_to_json(elt);
    // 过滤仅保留指定列
    const filteredData = jsonData.map(row => {
        const newRow = {};
        cols.forEach(colName => {
            newRow[colName] = row[colName];
        });
        return newRow;
    });
    // 用过滤后的数据生成工作表
    const ws = XLSX.utils.json_to_sheet(filteredData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "report");
    return dl ?
        XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
        XLSX.writeFile(wb, fn || ('Report_result.' + (type || 'xlsx')));
}

注意：方案2依赖SheetJS(XLSX)库，使用前请确保页面已正确引入该库。

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