先看效果圖

QQ圖片20200109095847.png

實(shí)現(xiàn)方法：xlsx

步驟：

1.首先安裝xlsx組件
npm install xlsx --save
2.封裝一個(gè)組件處理excel數(shù)據(jù)

<template>
  <span>
  <!-- 僅用于接收文件 不顯示 display:none -->
    <input
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    />
    <el-button @click="handleUpload">上傳文件</el-button>
  </span>
</template>

<script>
import XLSX from "xlsx";
export default {
  props:{
    onSuccess:Function,//傳入表格數(shù)據(jù)獲取成功后方法
  },
  data(){
    return{
      excelData: {
        header: null, //表格頭部
        results: null  //具體數(shù)據(jù)內(nèi)容
      }
    }
  },
  methods: {
    //數(shù)據(jù)處理成功執(zhí)行的方法
    generateData({ header, results }){
      this.excelData.header = header
      this.excelData.results = results
      this.onSuccess && this.onSuccess(this.excelData)
    },
    //點(diǎn)擊上傳按鈕 調(diào)用input的點(diǎn)擊事件
    handleUpload(){
      this.$refs['excel-upload-input'].click()
    },
    //input的點(diǎn)擊事件
    handleClick(e) {
      const file = e.target.files;
      const rawFile = file[0];
      if (!rawFile) return;
      this.upload(rawFile);
    },
    //清空數(shù)據(jù)
    handleClear(){
      this.excelData = {
        header: [],
        results: []
      }
      this.onSuccess && this.onSuccess(this.excelData)
    },
     //導(dǎo)入表格
    upload(rawFile) {
      this.$refs['excel-upload-input'].value = null // fix can't select the 
      this.readerData(rawFile);
    },
    //表格數(shù)據(jù)處理（重點(diǎn)）
    readerData(rawFile) {
      return new Promise((reslove, reject) => {
        const reader = new FileReader();
        reader.onload = e => {
          const data = e.target.result;
          const workbook = XLSX.read(data, { type: "array" });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const header = this.getHeaderRow(worksheet);
          const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData({ header, results })
          console.log(results)
        };
        reader.readAsArrayBuffer(rawFile);
      });
    },
    getHeaderRow(sheet) {
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]);
      let C;
      const R = range.s.r;
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    }
  }
};
</script>

<style scoped>
.excel-upload-input{
  display: none;
  z-index: -9999;
}
</style>

3.父組件調(diào)用

<template>
  <div class="upload-box">
    <upload-excel :on-success="handleSuccess"></upload-excel>
    <el-button @click="handleDownExcel">下載導(dǎo)入模板</el-button>
    <el-button @click="handleClear">清空數(shù)據(jù)</el-button>
    <p>已導(dǎo)入{{tableData.length}}條數(shù)據(jù)</p>
    <el-table border v-if="tableData.length" :data="tableData" size="mini" height="400">
      <el-table-column type="index" label="序號(hào)" :index="1" width="80" align="center"></el-table-column>
      <el-table-column
          v-for="item of tableHeader"
          :key="item"
          :prop="item"
          :label="item"
          align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import UploadExcel from "@/components/UploadExcel";
export default {
  name: "",
  components: { UploadExcel },
  data() {
    return {
      tableHeader: [],
      tableData: [],
    };
  },
  methods: {
    // 下載
    handleDownExcel(type) {
      // console.log(type);
      const url = 'http://192.168.0.152:8104/util/downloadExcels?fileName='
      let excelUrl = "XXX.xls";
      window.open(url+excelUrl)
    },
    // 清空數(shù)據(jù)
    handleClear() {
      this.tableHeader = [];
      this.tableData = [];
    },
    //處理表格數(shù)據(jù)
    handleSuccess({ results, header }) {
      this.tableData = results;
      this.tableHeader = header;
    }
  }
};
</script>

至此數(shù)據(jù)直接展示就好了