Angular如何将上传的CSV File对象转换为可遍历的JSON对象

构建报错修复 #

报错是Angular的TS编译配置未引入浏览器环境类型导致，按以下步骤处理：

• 打开项目根目录tsconfig.json，在compilerOptions.lib数组中添加"DOM"，TS即可识别浏览器全局API，无需加window.前缀，直接使用TextDecoder即可
• 若仍识别不到File.arrayBuffer方法，可添加临时类型断言：const f = fileList.item(0) as File & { arrayBuffer: () => Promise<ArrayBuffer> }

CSV转JSON实现方案 #

Node环境的csv-parser@3.0.0基于Node流设计，不支持浏览器端File对象，无法直接使用。推荐两种实现方案：

方案1：使用浏览器端CSV解析库（推荐） #

成熟的第三方库可自动处理逗号转义、字段换行、编码兼容等边界场景，无需手动编写解析逻辑，调用方式简洁。示例代码如下：

// 先安装对应npm包后导入
import * as Papa from 'papaparse';

const f = fileList.item(0) as File;
Papa.parse(f, {
  header: true, // 自动将CSV第一行作为JSON的键
  complete: (res) => {
    console.log('转换完成的JSON数组：', res.data);
  },
  encoding: 'utf-8'
});

方案2：原生实现（无第三方依赖） #

如果不想引入额外依赖，可使用FileReader替换原有arrayBuffer+TextDecoder的实现，兼容性更强，不会出现构建报错：

const f = fileList.item(0) as File;
const reader = new FileReader();

reader.onload = (e) => {
  const csvText = e.target?.result as string;
  const lines = csvText.split('\n').filter(line => line.trim());
  const headers = lines[0].split(',').map(h => h.trim());
  const results: Record<string, string>[] = [];

  for (let i = 1; i < lines.length; i++) {
    const row: Record<string, string> = {};
    // 匹配带引号的转义字段，避免字段内逗号导致拆分错误
    const columns = lines[i].match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
    columns.forEach((col, idx) => {
      row[headers[idx]] = col.replace(/^"|"$/g, '').trim();
    });
    results.push(row);
  }

  console.log('转换完成的JSON数组：', results);
};

reader.readAsText(f, 'utf-8');

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