共计 1783 个字符,预计需要花费 5 分钟才能阅读完成。
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>`
展现成果
写在最初
以上能够借鉴,可能不能齐全满足,如有有余,请大佬指出!