Vue.js中解析XLS / CSV文件 - vue-xls-csv-parser

Vue.js中解析XLS / CSV文件 - vue-xls-csv-parser
插件名称 vue-xls-csv-parser
发布时间 2020年10月11日
插件作者 victorboissiere

一个简单的VueJS组件,可通过验证来解析XLS / CSV文件。

要求

您将需要Bootstrap3.x。尚未通过Boostrap 4进行​​测试。

安装和下载:

# Yarn
$ yarn add vue-xls-csv-parser

# NPM
$ npm install vue-xls-csv-parser --save

事记

onValidate(results):由组件解析并在用户验证后返回的所有数据

用法示例

<template>
  <div class="app">
    <h3>Example - Import file with required login, firstname, lastname and optional values</h3>
    <br>
    <xls-csv-parser :columns="columns" @on-validate="onValidate" :help="help" lang="en"></xls-csv-parser>
    <br><br>
    <div class="results" v-if="results">
      <h3>Results:</h3>
      <pre>{{ JSON.stringify(results, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
  import { XlsCsvParser } from 'vue-xls-csv-parser';
  export default {
    name: 'App',
    components: {
      XlsCsvParser,
    },
    methods: {
      onValidate(results) {
        this.results = results;
      },
    },
    data() {
      return {
        columns: [
          { name: 'Student login', value: 'login' },
          { name: 'Student firstname', value: 'firstname' },
          { name: 'Student lastname', value: 'lastname' },
          { name: 'Other', value: 'other', isOptional: true },
        ],
        results: null,
        help: 'Necessary columns are: login, firstname and lastname',
      };
    },
  };
</script>