可行但需用 PapaParse 等专业库解析，因 CSV 含引号、换行、BOM 等复杂格式，简单 split(",") 会错行漏字段；大文件须流式解析+分块渲染，兼顾性能与可访问性。
前端直接解析 CSV 是可行的，但默认用 FileReader 读取后得到的是原始字符串，不处理分隔符、引号、换行等边界情况就直接切分，十有八九会错行、漏字段、吞空值——尤其当 CSV 来自 Excel 或业务系统导出时。
为什么不能直接 split(",") 解析 CSV 字符串
CSV 格式远比“逗号分隔”复杂：字段含逗号（如 "Beijing, China"）、换行（"line1\nline2"）、双引号转义、空字段、BOM 头……这些都会让简单字符串切分崩盘。
-
split(",")会把"A,"B,C",D"错拆成 4 段，实际只有 3 个字段 - 忽略 BOM（如
\ufeff）会导致首列名乱码，比如"姓名"变成"姓名" - 没处理
\r\n和\n混用，可能在 Windows 导出的 CSV 中多出空行
用 PapaParse 替代手写解析逻辑
它专为浏览器环境设计，支持流式解析、错误恢复、类型自动推断，且体积小（gzip 后约 25KB），比自己维护正则或状态机靠谱得多。
把记录数组导出为带样式的 Excel(xlsx) 或带 BOM 的 CSV。支持列配置（表头/宽度/顺序）、表头冻结首行、斑马纹、布尔值转「是/否」、数组换行、CSV 中文防乱码。零依赖。触发词：导出 Excel、导出 CSV、记录转表格、列配置导出、数据导出、表格美化、JSON 转表格。
- 启用
header: true直接生成对象数组，不用手动映射列名 - 设
dynamicTyping: true自动转number/boolean，避免后续parseInt出错 - 加
skipEmptyLines: true过滤空白行，省得自己filter(row => Object.values(row).some(v => v)) - 遇到解析失败（如引号不匹配），
error回调会给出具体行号和错误类型，方便提示用户“第 127 行格式异常”
const results = Papa.parse(csvString, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
error: (err) => console.warn("CSV parse error at row", err.row, err.message)
});
大文件（>5MB）必须用流式解析 + 分块渲染
一次性加载整个 CSV 到内存再解析，页面会卡死，Chrome 可能直接触发“Aw, Snap!”。真实仪表盘场景中，用户上传 10 万行销售数据很常见。
立即学习“前端免费学习笔记（深入）”；
- 用
Papa.parse(file, { chunk: (chunk) => {...} })流式读取，每块最多处理 1000 行 - 每 chunk 解析完，用
requestIdleCallback批量追加到 DOM 或更新虚拟滚动列表，避免阻塞主线程 - 别等全部解析完才显示 UI——先渲染表头 + 前 50 行，剩余边加载边追加
- 如果要做筛选/搜索，不要全量存 JS 对象数组；改用
TypedArray存数值列，或只缓存索引映射
从 CSV 到 HTML 表格的关键细节
生成 <table> 不是终点，可访问性、性能、语义化才是仪表盘长期可用的根基。
<ul><li>必须用 <code><thead><th scope="col">，否则屏幕阅读器无法关联表头与数据单元格
<li>避免给整张表加 <code>overflow: auto——横向滚动时表头会消失；正确做法是包裹两层容器：<div class="table-container"><div class="table-wrapper"><table>...</table></div></div>，仅对内层设 overflow-x
<tr> 的 CSS 动画或 hover 效果，否则滚动卡顿明显
<li>如果后端返回的是带 BOM 的 UTF-8 CSV，<code>FileReader 读出的字符串开头会有 \ufeff，需在解析前 csvString.replace(/^\uFEFF/, '')
真正难的不是“怎么把 CSV 变成表格”，而是当用户上传一个字段名全是拼音缩写、含 3 层嵌套引号、时间戳格式混杂的生产 CSV 时，你的解析逻辑是否还能吐出结构清晰、类型准确、可无障碍访问的数据——这些边界 case，往往在第一次上线就被忽略，直到财务同事说“上月数据导入后 ROI 全变成 NaN”。
