教程 · CSV → 表格

CSV 转成 HTML 表格,大的也算

CSV 就是一个带标点约定的文本文件,而这类约定有好几种。多数转换出问题,其实是在争这个文件用的是哪一种。

这篇讲分隔符是怎么定的、引号起什么作用,以及体积上限到底卡在哪儿。

去转换器

分隔符是认出来的,不是假定的

逗号、分号、制表符、竖线都有人用。分号尤其常见:在小数点用逗号的地区导出表格,出来就是分号,因为逗号已经被占了。

识别会读前十行,每种候选都试一遍,挑出让列数一致的那个。前几行不寻常的文件 —— 比如表头上面还有一行标题 —— 可能会被认错,所以认出来的分隔符会在输出里说明。不对的话,手动改。

  1. 01把文件拖进来,看表格上面那条说明用了哪个分隔符。
  2. 02本该六列却只有一列的话,从下拉里手动指定分隔符。
  3. 03确认第一行落进了表头。如果这个文件没有表头,把那个开关关掉,每一行都变成内容行。

带引号的字段,和格子里的逗号

双引号包起来的字段里可以有分隔符,里面连着两个引号表示一个字面引号字符。这是 RFC 4180,处理得很规矩。

带引号的字段里还可以有换行。到了 HTML 里它们变成格子里的 <br>,所以两行的地址还是两行,不会把这一行撑散。

CSV
name,note
Bolt,"M6, 40mm"
HTML
<tr>
  <td>Bolt</td>
  <td>M6, 40mm</td>
</tr>

单列文件那条提示

只有一列的 CSV 会报分隔符的问题。这值得解释一下,因为这个文件通常没毛病。

识别的办法是找出哪个字符能一致地把每行切开。只有一列时没有可切的地方,所以什么都不像分隔符,它就照实说了。输出仍然是对的:一列,每行都在。

不想看到这条提示的话,明确指定分隔符,别让它自动。

这儿说的「大」是多大

两条互不相干的上限。单文件 25 MB,还有十万格 —— 行数乘列数,所以六列的文件能到一万六千行左右,一百列的到一千行就停。

先撞上的是格数那条,而它管的是浏览器而不是解析器。每一格在预览里都是若干个 DOM 节点,几十万格的表格会把这个标签页卡死。拒掉比冻住好。

真的更大的,按行切开分几次转 —— 表头行可以每份都带一遍。空行会自动丢掉,包括只有一串分隔符的行,文件末尾那一堆 “,,,” 通常就是这种。

转出来的表格长什么样

表头行变成 <thead>,格子是 <th scope="col">;其余的进 <tbody>。长短不齐的行会补齐到最宽那行,让表格保持成一个矩形,输出里会说有多少行需要补 —— 这通常说明上游有东西坏了。

不做任何类型转换。007 还是 007,1-2 这样的值不会变成日期。Excel 会那么干,这儿不会。

开了响应式之后,表格外面会包一层横向滚动的 <div class="table-wrap">。十二列的表格在手机上放不下,让它直接溢出会把整页撑宽,而不是只撑它自己。

把 CSV 拖进来,或者直接粘上那些行。文件在你的浏览器里解析,客户数据一步都不出这台机器。

CSV → 表格