教學 · 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 → 表格