Vue-xlsx-table 将Excel转为JSON

• Vue-xlsx-table官网

安装

npm install vue-xlsx-table --save

引用

import vueXlsxTable from 'vue-xlsx-table'
Vue.use(vueXlsxTable, {rABS: false})

例子

测试文件

<template>
  <vue-xlsx-table @on-select-file="selectExcel" style="margin-right: 50px;">批量导入</vue-xlsx-table>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    selectExcel(data) {
        // 点击上传后,打印 data 将会出现 header和 body 俩个对象
        
        // header 即为表格数据的第一行 
        console.log(data.header);
        // header:{ 
        //     0: "title"
        //     1: "description"
        //     2: "source"}

        // body即为存储的数据
        console.log(data.body);
    }
  },
};
</script>

个人实例

<template>
  <div class>
    <vue-xlsx-table @on-select-file="selectExcel" style="margin-right: 50px;">批量导入</vue-xlsx-table>

    <el-dialog title="导入信息" :visible.sync="dataVisible">
      <el-table :data="datalist">
        <el-table-column property="title" label="标题" width="150"></el-table-column>
        <el-table-column property="description" label="描述" width="200"></el-table-column>
        <el-table-column property="source" label="作者"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadServer()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataVisible: false,
      datalist: []
    };
  },
  methods: {
    selectExcel(excelData) {
      this.dataVisible = true;
      let datas = excelData.body;

      let dataList = [];
      datas.forEach(element => {
        this.datalist.push(element);
      });
    }
  },
};
</script>