vue對CSV檔案進行表格預覽

1.CSV檔案說明

逗號分隔值（Comma-Separated Values，CSV，有時也稱為字元分隔值，因為分隔字元也可以不是逗號），其檔案以純文字形式儲存表格資料（數字和文字）。純文字意味著該檔案是一個字元序列，不含必須像二進位制數字那樣被解讀的資料。CSV檔案由任意數目的記錄組成，記錄間以某種換行符分隔；每條記錄由欄位組成，欄位間的分隔符是其它字元或字串，最常見的是逗號或製表符。通常，所有記錄都有完全相同的欄位序列。通常都是純文字檔案。建議使用WORDPAD或是記事本來開啟，再則先另存新檔後用EXCEL開啟，也是方法之一。

2.CSV資料格式轉換

下面是一個實際 CSV 檔案中的部分內容，讓大家對他有一個感性的認識。我們選的是 Sjojo_Rescan 的 CSV 檔案 (Sjojo 是 ASW- 亞洲掃圖風的成員之一)。
檔名， 檔案大小 (以位元組為單位)，CRC 校驗值，
sj_mino1001.jpg，715282，4FB55FE8，
sj_mino1002.jpg，471289，93203C5C，
sj_mino1003.jpg，451929，C4E80467，

通常 CSV 檔案開頭是不留空的，以行為單位，每行中記錄一張圖片的多項資料，每項資料用逗號來分隔（標準英文逗號）。一般說來集圖用的.CSV 檔案的格式是這樣的：
檔名， 檔案大小 (以位元組為單位)，CRC 校驗值， 註釋 (可省略)
sj_mino1001.jpg，715282，4FB55FE8，

預設情況下，我們認為csv的第一行資料是表頭，所以，我們預期是將上面這段內容轉為：
想展示成如下表格效果：

<script>
const str = `檔名, 檔案大小 (以位元組為單位),CRC 校驗值,
sj_mino1001.jpg,715282,4FB55FE8,
sj_mino1002.jpg,471289,93203C5C,
sj_mino1003.jpg,451929,C4E80467,`

const formatCSVToTable = (str) => {
      const result = [];
      const jsonObj = str.split("\n");
      let arrHeader = [];
      for (const i in jsonObj) {
        if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
          const row = `${jsonObj[i]}`;
          if (row.trim().length > 0) {
            const kv = jsonObj[i].split(',');
            if (i == 0) {
              // 獲取column表頭
              arrHeader = kv;
            } else {
              const obj = {};
              for (let index = 0; index < arrHeader.length; index++) {
                // 組裝表格資料
                const name = String(arrHeader[index]);
                if (!arrHeader[index]) continue
                if (!obj[name]) {
                  try {
                    if (kv[index]) {
                      obj[name] = String(kv[index]);
                    } else {
                      obj[name] = '';
                    }
                  } catch (err) {
                    obj[name] = '';
                  }
                }
              }
              result.push(obj);
            }
          }
        }
      }
      return result
    }

formatCSVToTable(str)
</script>

輸出如下：

3.表格預覽展示

使用elementUI的el-table元件展示
組裝表頭

let column = [];
for (let item in CSVList[0]) {
  column.push({
    label: item,
    prop: item,
  })
}

表格渲染
`<el-table :data="CSVList">

  <el-table-column :label="item" :prop="item" v-for="item in column" :key="item"></el-table-column>

</el-table>`
展示效果

寫在最後

以上可以借鑑，可能不能完全滿足，如有不足，請大佬指出！