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>`
展现成果
写在最初
以上能够借鉴，可能不能齐全满足，如有有余，请大佬指出！