<template>
  <div id="app">

      <!-- 上传按钮 -->
      <input class="input-file" type="file" @change="exportData" style="display:none"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
      <el-button type="success" size="small" @click="btnClick">上传excel</el-button>
      <!-- END -->

      <!-- 表格 -->
      <el-table
      :data="tableData"
      style="width: 100%"
        height="450"
        size="mini">
          <el-table-column
          :prop="item"
          :label="item"
          width="140"
          v-for="(item,index) in checkboxTableColumn"
          :key="'column'+index">
          </el-table-column>
      </el-table>
      <!-- END -->

      <!-- 分页 -->
      <el-pagination
        v-if="excelData != 0"
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30,40,50,100,200,500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- END -->
      
  </div>
</template>

<script>
import XLSX from "xlsx"
export default {
  
  data(){
    return {
      //所有键的值
      columnHeader:[],

      // 导入的excel的数据
      excelData:[],

      // 表格显示列
      checkboxTableColumn:[],

      //表格数据
      tableData:[],

      // 当前分页
      currentPage:1,

      // 每页显示数量
      pageSize:10,

      // 数据总数
      total:0
    }
  },

  methods: {

      // 将上传input框点击事件改为按钮
      btnClick() {
            document.querySelector(".input-file").click();
      },

      // 解析excel
      exportData(event) {
        if(!event.currentTarget.files.length) {
          return;
        }
        const that = this;
        // 拿取文件对象
        let f = event.currentTarget.files[0];
        //这里已经拿到了excel的file文件，若是项目需求，可直接$emit丢出文件
        // that.$emit('getMyExcelData',f);
        // 用FileReader来读取
        let reader = new FileReader();
        // 重写FileReader上的readAsBinaryString方法
        // FileReader.prototype.readAsBinaryString = function(f) {
        //   let binary = "";
        //   let wb; // 读取完成的数据
        //   let outdata; // 你需要的数据
        //   let reader = new FileReader();
          reader.onload = function(e) {
            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            // let bytes = new Uint8Array(reader.result);
            // let length = bytes.byteLength;
            // for (let i = 0; i < length; i++) {
            //   binary += String.fromCharCode(bytes[i]);
            // }
            var data = e.target.result;
            // 接下来就是xlsx
            var wb = XLSX.read(data, {
              type: "buffer"
            });
            var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            // 导出格式为json，{表数据：[]}
            console.log(outdata);
            that.excelData=outdata;
            that.tableData=outdata.slice(0,10);
            that.total=outdata.length;
 
 
            // 获取数据的key
            var importDataThead = Array.from(Object.keys(outdata[0])).map(
              item => {
                return item;
              }
            );
 
            that.columnHeader=importDataThead;
            that.checkboxTableColumn=importDataThead.slice(0,9);
            console.log(importDataThead);
          };
          reader.readAsArrayBuffer(f);
        // };
        // reader.readAsBinaryString(f);
      },
 
       // 分页切换
      CurrentChange(val){
        this.currentPage=val;
        
        this.tableData=this.excelData.slice((val-1)*this.pageSize,(val*this.pageSize)-1);
      },
        // 每页显示数量改变
        handleSizeChange(val){
 
        this.pageSize=val;
        this.tableData=this.excelData.slice((this.currentPage-1)*val,(this.currentPage*val)-1);
        
      },
  }
}
</script>

<style>
#app{
  width: 600px;
  overflow: scroll;
  background: rgb(226, 226, 226);
  padding: 20px;
}
</style>