vue前端解析Excel表格数据

引入插件

npm install xlsx --save

在组件中使用

<template>
  <div id="app">
    <h3>{{message}}</h3>
    <el-upload action accept=".xlsx, .xls" :auto-upload="false" :show-file-list="false" :on-change="handle">
      <el-button type="primary">选择文件</el-button><span>{{ fileName }}</span>
    </el-upload> 
  </div>
</template>
 
<script>
import XLSX from "xlsx";
export default {
  name: 'App',
  data(){
    return {
      message:' XLSX 的使用'
    }
  },
  methods:{
    // 解析上传文件
    handle(ev) {
      let file = ev.raw;
      this.fileName = ev.name;
      const fileReader = new FileReader();
      // readAsArrayBuffer之后才会启动onload事件
      fileReader.onload = event => {
        const data = new Uint8Array(event.target.result);
        const { SheetNames, Sheets } = XLSX.read(data, { type: "array" });
        for (let i = 0; i < SheetNames.length; i++) {
          // 解析后的表格数据
          this.uploadData.push(XLSX.utils.sheet_to_json(Sheets[SheetNames[i]]));
        }
      };
      // uploadFile是上传文件的文件流
      fileReader.readAsArrayBuffer(file);
    },
  },
}
</script>
 
<style>
 
</style>