一樣是工作筆記，記錄一下將網頁的表格<table>存成CSV的做法。

還是寫成了 CodePen 範例比較好理解：

See the Pen download table as CSV by Ronnie (@yuugou727) on CodePen.

測試了一些包含空格、雙引號跟前一篇 Character Entity 的情況，可以輸出 csv 字串到console 看。

要點

  • 將<thead>與<tbody>裡的值組成二維陣列，用querySelectorAll爬到的元素陣列是Array-like Object，用 Spread-syntax 可以轉換成 array 使用map方法
  • csv 格式中，欄位的值用雙引號"包住，原始資料帶有雙引號字元則用兩個雙引號""取代。用逗號,分隔每欄，再用換行符\n分隔每列
  • 在 blob 最前面加上 BOM 標示為 utf-8 編碼
  • 下載：將 blob 轉換成 objectURL，建立一個a元素寫入其屬性，append、直接呼叫click()後 remove
  • 人活得好好的為什麼要支援IE對於 IE 下載 blob 的方法使用navigator.msSaveBlob()

Reference