vue.js - VueJS 导入和解析 CSV(仅限前端)
问题描述
您能否分享一个从客户端解析 CSV 文件的工作示例?
我似乎根本找不到任何可行的例子......
我一直在玩 vue-papa-parser 和 vue-csv-import 但可以让它工作:(
这是我的组件文件(使用后一个包):
<template lang="html">
<div class="container">
<h1 class="h2">CSV Upload</h1>
<div class="dragndrop text-muted d-flex flex-column justify-content-center align-items-center border border-secondary">
<vue-csv-import
v-model="csv"
:fields="{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
>
<vue-csv-toggle-headers></vue-csv-toggle-headers>
<vue-csv-errors></vue-csv-errors>
<vue-csv-input></vue-csv-input>
<vue-csv-map :auto-match="false"></vue-csv-map>
</vue-csv-import>
</div>
</div>
</template>
<script>
import { VueCsvImport } from 'vue-csv-import';
export default {
name: "CSVUpload",
components: {
VueCsvImport
},
data() {
return {
csv: null
}
},
methods: {
}
}
</script>
<style lang="css" scoped>
.dragndrop {
background-color: #f5f5f5;
height: 50vh;
width: 80%;
margin: 2.5em auto;
}
</style>
但在控制台上我得到了这个:
[Vue warn]: Error in render: "TypeError: Cannot read property 'VueCsvImportData' of undefined"
found in
---> <VueCsvImport>
<CallRecordUpload> at src/components/admin/Upload/Upload.vue
<Home> at src/components/Home.vue
<App> at src/App.vue
<Root>
因此我什至看不到任何 INPUT TYPE="FILE" 尝试上传...... vue-csv-import 有问题:(
有什么想法吗?
编辑:已解决
我必须安装较低版本(v4 仅适用于 vue3!)
npm install vue-csv-import@2.3.4 --save
对我有用!
谢谢@marsnebulasoup 的提示!
解决方案
坏版本..它自动使用最新版本4(仅适用于vue3 ..对于vue2我必须使用2.3.4并且效果很好:))
查看更新日志