使用JavaScript合并CSV中多列PDF数据并渲染为单个链接列的问题

我明白你遇到的问题了——核心是在遍历CSV列的时候，你尝试临时存储PDF1、PDF2的值，但因为forEach回调的作用域特性，当处理到PDF3时，之前的变量要么没被正确保留，要么直接超出了作用域，所以才会出现大量undefined的情况。另外你原来的空值判断逻辑也有点小问题，咱们一步步来解决。

问题根源拆解 #

1. 作用域问题：在Object.keys(lines[0]).forEach(function(key)循环里，每次迭代都是一个独立的函数调用，处理PDF1时声明的pdflink1，到处理PDF3的迭代时根本不存在，自然会返回undefined。
2. 空值判断错误：你用pdflink1 != []来判断空值，但CSV里的空单元格是空字符串，不是空数组，这个判断完全不生效，会把空值当成有效内容处理。

优化后的解决方案 #

咱们换个思路：对每一行数据，主动收集所有PDF相关字段，处理成链接后再插入单元格。这种方式逻辑更清晰，彻底避开作用域的坑。

完整代码实现

HTML部分和你原来的一致：

<span id="output"></span>

JavaScript部分做了关键改动：

async function fetchCSV(url) {
    try {
        const response = await fetch(url);
        const data = await response.text();
        processData(data);
    } catch (error) {
        console.error('Error fetching CSV:', error);
    }
}

// 调用接口获取CSV
fetchCSV('https://blabla/myfile.csv');

function processData(csv){
    // 拆分CSV行，同时过滤掉空行
    const allTextLines = csv.split(/\r\n|\n/).filter(line => line.trim() !== '');
    const keys = allTextLines.shift().split(',');
    const lines = [];
    
    for (const line of allTextLines) {
        const arr = line.split(',');
        const obj = {};
        for(let i = 0; i < keys.length; i++){
            // 确保空值转为空字符串，避免出现undefined
            obj[keys[i]] = arr[i] || '';
        }
        lines.push(obj);
    }
    console.log(lines);
    drawOutput(lines);
}

function drawOutput(lines){
    const output = document.getElementById("output");
    output.innerHTML = "";
    const table = document.createElement("table");
    table.border = 1; // 可选：添加边框让表格更直观

    // 生成表头：直接创建Number和PDF两列
    const tableHeader = table.insertRow(-1);
    const thNumber = document.createElement("TH");
    thNumber.textContent = "Number";
    tableHeader.appendChild(thNumber);
    
    const thPDF = document.createElement("TH");
    thPDF.textContent = "PDF";
    tableHeader.appendChild(thPDF);

    // 生成数据行
    for (const line of lines) {
        const row = table.insertRow(-1);
        
        // Number列
        const numberCell = row.insertCell(-1);
        numberCell.textContent = line.Number;

        // PDF列：收集所有有效的PDF文件
        const pdfCell = row.insertCell(-1);
        const validPdfs = [line.PDF1, line.PDF2, line.PDF3]
            .map(file => file.trim()) // 清理文件名前后的空格
            .filter(file => file !== ''); // 过滤空值

        // 为每个有效PDF创建链接，用空格分隔
        validPdfs.forEach((file, index) => {
            const a = document.createElement('a');
            a.href = `dir/${file}`;
            a.textContent = `[link>${file}]`; // 和你想要的格式完全匹配
            if (index > 0) {
                // 除第一个链接外，前面加空格分隔
                pdfCell.appendChild(document.createTextNode(' '));
            }
            pdfCell.appendChild(a);
        });
    }

    output.appendChild(table);
}

关键改动说明 #

1. CSV数据预处理：
   • 过滤了空行，避免处理无效数据；
   • 给所有字段默认赋值为空字符串，彻底杜绝undefined的出现。
2. 表头生成：
   不再依赖原CSV的表头遍历，直接手动生成Number和PDF两列，逻辑更简洁，也避开了原代码中处理PDF1/PDF2/PDF3的复杂判断。
3. PDF列核心逻辑：
   对每一行主动收集PDF1/PDF2/PDF3的值，先清理空格再过滤空值，最后逐个生成链接并添加到单元格，完美实现你要的多链接合并效果。
4. 空值判断修复：用filter(file => file !== '')准确过滤空字符串，替代原代码中错误的数组比较。

可选优化建议 #

• 如果你的CSV里存在带逗号的字段（比如文件名包含逗号），split(',')会失效，这时候可以考虑用专门的CSV解析库，或者自己实现更鲁棒的解析逻辑；
• 可以给表格添加CSS样式，比如设置border-collapse: collapse、单元格内边距等，让表格更美观；
• 可以给链接添加target="_blank"属性，让PDF在新窗口打开。

备注：内容来源于stack exchange，提问作者Georgiy Shoulga