vue讀取excel數據生成數組

1. 首先安裝 npm install xlsx
2. html中 <input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">
3. 引入 import XLSX from 'xlsx' 

代碼如下：

<template>
  <div class="hello">
    <input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">
  </div>
</template>

<script>

import Vue from 'vue'
import XLSX from 'xlsx'
export default {
  name: 'tab1',
  data () {
    return {
      outputs: []
    }
  },
  mounted() {
    this.$refs.upload.addEventListener('change', e => {//綁定監聽表格導入事件
    this.readExcel(e);
    })
  },
  methods: {
     readExcel(e) {//表格導入
        var that = this;
        const files = e.target.files;
        console.log(files);
        if(files.length<=0){//如果沒有文件名
          return false;
        } else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
          this.$Message.error('上傳格式不正確，請上傳xls或者xlsx格式');
          return false;
        }
 
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
        try {
            const data = ev.target.result;
            const workbook = XLSX.read(data, {
            type: 'binary'
            });
            const wsname = workbook.SheetNames[0];//取第一張表
            const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格內容
            console.log(ws);
            that.outputs = [];//清空接收數據
            for(var i= 0;i<ws.length;i++){
            var sheetData = {
                name: ws[i].name,
                sex: ws[i].sex,
                name: ws[i].age
            }
            that.outputs.push(sheetData);
            }
            this.$refs.upload.value = '';
 
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    btn () {
      console.log(Vue)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>