Vue 项目中使用 Papa Parse 解析本地上传的 csv 文件,并在 el-table 中展示
一、安装并使用:
1. 安装papaparse库,用于解析CSV文件:
npm install papaparse
2. 在组件中使用:
- 关键代码
import Papa from 'papaparse';
Papa.parse(file, config);
const csv = Papa.unparse(data[, config]);
- 具体实例
页面结构:
<template>
<el-row
class="pd-tb-40"
:gutter="20"
>
<el-col :span="12">
<div class="upload-box mr-l-100">
<el-upload
action="#"
accept=".csv"
:multiple="false"
:limit="1"
:show-file-list="false"
:before-upload="beforeFileUpload"
>
<el-button
size="small"
type="primary"
>
点击上传
</el-button>
<div
slot="tip"
class="el-upload__tip"
>
<div class="upload-file-desc">
1、一次只能上传一份csv <br />
2、文件说明:
<p class="mr-l-20 tx-nowrap">·xxxxxxx</p>
</div>
</div>
</el-upload>
</div>
</el-col>
<el-col :span="12">
<el-table
:data="tableData"
style="width: 100%"
max-height="480"
>
<el-table-column
v-for="(header, index) in tableHeaders"
:key="index"
:prop="header"
:label="header"
></el-table-column>
</el-table>
</el-col>
</el-row>
</template>
逻辑部分:
<script>
import Papa from "papaparse";
export default {
data() {
return {
tableData: [],
tableHeaders: [],
};
},
methods: {
beforeFileUpload(file) {
// 使用 PapaParse 解析 CSV 文件
// const encodingList = ["utf-8", "gbk", "gb2312"];
Papa.parse(file, {
header: true,
skipEmptyLines: true,
encoding: "gb2312",
complete: result => {
// 解析完成后将数据存储到 tableData 中
this.tableData = result.data;
this.tableHeaders = Object.keys(result.data[0] || {});
},
error: error => {
console.error("CSV解析错误:", error.message);
},
});
return false; // 阻止上传行为
},
},
};
</script>
csv文件内容包含中文时需要注意编码,通过 encoding
属性设置,避免出现中文乱码。更多功能及配置可查看官方文档。