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的第一行数据是表头，所以，我们预期是将上面这段内容转为：
想展示成如下表格效果：

文件名	文件大小	CRC 值	注释 (已省略)
sj_mino1001.jpg	715282	4FB55FE8
sj_mino1002.jpg	471289	93203C5C
sj_mino1003.jpg	451929	C4E80467

<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>`
展示效果

写在最后

以上可以借鉴，可能不能完全满足，如有不足，请大佬指出！