How We Handle Client-Side CSV Merging Without Server Processing

我们如何处理无需服务器端的客户端 CSV 合并

When merging CSVs in the browser, handling mismatched columns and quoted cells changes everything. Here’s how filetools does it. Last week we shipped CSV merge/split/transpose tools for filetools, and the most interesting challenge wasn’t CSV parsing - it was handling real-world data without a server. Here’s how we handle the hard cases.

在浏览器中合并 CSV 文件时，处理不匹配的列和带引号的单元格是整个过程的关键。以下是 filetools 的实现方式。上周，我们为 filetools 发布了 CSV 合并、拆分和转置工具。其中最有趣的挑战并非 CSV 解析本身，而是在没有服务器的情况下处理真实世界的数据。以下是我们处理这些棘手情况的方法。

The Problem: CSV files in the wild are messy. Columns don’t always match. A cell value contains a comma and that comma is quoted. Headers are sometimes case-sensitive, sometimes not. When you build on a server, you can run a fast library and stream the result. In the browser, you have to make your merge operation deterministic from first load.

问题所在：现实中的 CSV 文件往往非常混乱。列并不总是匹配的；单元格值中可能包含逗号，且该逗号被引号包裹；标题有时区分大小写，有时则不然。在服务器端构建时，你可以运行快速的库并流式传输结果；但在浏览器中，你必须确保合并操作从首次加载起就是确定性的。

Our approach: Column matching: Users specify which columns to merge on (e.g., “id” or “email”). We do a case-insensitive first pass, then check for exact matches. If no match exists, we warn the user and ask them to pick from the detected headers. This upfront clarity saves merge errors later.

我们的方法：列匹配：用户指定用于合并的列（例如“id”或“email”）。我们首先进行不区分大小写的初步匹配，然后检查精确匹配。如果不存在匹配项，我们会警告用户并要求他们从检测到的标题中进行选择。这种预先的清晰度避免了后续的合并错误。

Quoted cell handling: We follow RFC 4180 strictly - a quote inside a quoted field is escaped as a double quote. Most CSV parsers get this wrong when they’re quick. We use the csv-parse library (MIT) vendored into the site, same way we do with PDF and ZIP libraries.

带引号单元格的处理：我们严格遵循 RFC 4180 标准——引号字段内的引号被转义为双引号。大多数快速 CSV 解析器在处理这一点时会出错。我们使用了集成到网站中的 csv-parse 库（MIT 协议），这与我们处理 PDF 和 ZIP 库的方式相同。

Column order: The merge operation respects column order from the first file, then appends any new columns from subsequent files. This is deterministic and reproducible.

列顺序：合并操作遵循第一个文件的列顺序，然后追加后续文件中出现的新列。这是确定且可复现的。

Why this matters for a browser tool: Server-based CSV tools hide their assumptions - you upload, they merge, you download. If a merge fails, you get an error message and no insight into why. Client-side, the user can see the detected headers, approve or correct them, and re-try immediately. That transparency matters when you’re dealing with data that represents real records or transactions.

这对浏览器工具为何重要：基于服务器的 CSV 工具隐藏了它们的假设——你上传、它们合并、你下载。如果合并失败，你只会得到一条错误消息，而无法了解原因。而在客户端，用户可以看到检测到的标题，进行确认或更正，并立即重试。当你处理代表真实记录或交易的数据时，这种透明度至关重要。

What shipped this week: We added merge, split (by row count or column value), transpose, and comparison tools. The same deterministic, transparent approach applies to each one.

本周发布内容：我们增加了合并、拆分（按行数或列值）、转置和比较工具。每一个工具都采用了同样确定且透明的处理方式。

Next question: what’s the most painful CSV operation that currently requires downloading a tool or writing a script? We’re thinking about row-level filtering and conditional formatting next.

下一个问题：目前最痛苦的、需要下载工具或编写脚本才能完成的 CSV 操作是什么？我们接下来正在考虑实现行级过滤和条件格式化功能。