Detailed explanation of Excel parsing and exporting based on Vue

   <!-- Upload file button -->
   <div class="buttonBox">
     <el-upload
       action
       accept=".xlsx, .xls"
       :auto-upload="false"
       :show-file-list="false"
       :on-change="handle"
     >
       <el-button type="primary" slot="trigger">Select EXCEL file</el-button>
     </el-upload>

     <el-button type="success" @click="submit" :disabled="disable">Collect data and submit</el-button>
   </div>

   <!-- Parsed data-->
   <div class="tableBox" v-show="show">
     <h3>
       <i class="el-icon-info"></i>
       My dear, the following is the data that has been collected. After checking that it is correct, please click the "Submit Collected Data" button to upload it to the server!
     </h3>

     <el-table :data="tempData" style="width: 100%" :height="height" border>
       <el-table-column prop="name" label="Name" min-width="50%"></el-table-column>
       <el-table-column prop="phone" label="电话" min-width="50%"></el-table-column>
     </el-table>
   </div>

// Read the file in binary format export function readFile(file) {
    return new Promise(resolve => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = ev => {
             resolve(ev.target.result);
        };
    });
 }

  //Read the data in FILE (convert to JSON format)
  let data = await readFile(file);
  let workbook = xlsx.read(data, { type: "binary" }),
    worksheet = workbook.Sheets[workbook.SheetNames[0]];
  data = xlsx.utils.sheet_to_json(worksheet);
  // Print the results and add the following figure console.log(workbook);

// Field correspondence table export let character = {
        name: {
            text: "Name",
            type: 'string'
        },
        phone:
            text: "Phone",
            type: 'string'
        }
    };

   let arr = [];
    data.forEach(item => {
        let obj = {};
        for (let key in character) {
          if (!character.hasOwnProperty(key)) break;
          let v = character[key],
            text = v.text,
            type = v.type;
          v = item[text] || "";
          type === "string" ? (v = String(v)) : null;
          type === "number" ? (v = Number(v)) : null;
          obj[key] = v;
        }
      arr.push(obj);
    });

    //Submit data to the server async submit() {
      if (this.tempData.length <= 0) {
        this.$message({
          message: "My dear, please select the EXCEL file first!",
          type: "warning",
          showClose: true
        });
        return;
      }

      this.disable = true;
      let loadingInstance = Loading.service({
        text: "My dear, please wait for a moment. I am working very hard to deal with it!",
        background: "rgba(0,0,0,.5)"
      });

      // What to do after completion let complate = () => {
        this.$message({
          message: "My dear, I have uploaded the data for you!",
          type: "success",
          showClose: true
        });
        this.show = false;
        this.disable = false;
        loadingInstance.close();
      };

      // Need to pass data to the server one by one let n = 0;
      let send = async () => {
        if (n > this.tempData.length - 1) {
          // All passed complate();
          return;
        }
        let body = this.tempData[n];
        // Go through the interface let result = await createAPI(body);
        if (parseInt(result.code) === 0) {
          // Success n++;
        }
        send();
      };
      send();
    }

  <div class="container">
    <!-- Upload button -->
    <div class="buttonBox">
      <router-link to="/upload">
        <el-tooltip content="EXCEL data collection" placement="top">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </el-tooltip>
      </router-link>
    </div>

    <!-- Search Area -->
    <div class="searchBox">
      <el-input v-model="search" placeholder="Fuzzy search based on name and mobile phone" @change="searchHandle"></el-input>
      <el-button type="success" @click="submit" :disabled="disabled">Export selected data</el-button>
    </div>

    <!-- List area -->
    <div class="tableBox">
      <el-table
        :data="tableData"
        :height="height"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="My lady, I am working hard to load..."
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="Number" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="Name" min-width="20%"></el-table-column>
        <el-table-column prop="phone" label="电话" min-width="20%"></el-table-column>
        <el-table-column prop="time" label="Creation time" min-width="25%" :formatter="formatter"></el-table-column>
      </el-table>
    </div>

    <!-- Paging area -->
    <div class="pageBox">
      <el-pagination
        background
        hide-on-single-page
        layout="total, sizes, prev, pager, next"
        :page-size="pageSize"
        :current-page="page"
        :total="total"
        @size-change="sizeChange"
        @current-change="prevNext"
        @prev-click="prevNext"
        @next-click="prevNext"
      ></el-pagination>
    </div>
  </div>

    // Export data submit() {
      if (this.selectionList.length <= 0) {
        this.$message({
          message: "My dear, please select the data you want to export first!",
          type: "warning",
          showClose: true
        });
        return;
      }

      this.disabled = true;
      let loadingInstance = Loading.service({
        text: "My dear, please wait for a moment. I am working very hard to deal with it...",
        background: "rgba(0,0,0,.5)"
      });

      let arr = this.selectionList.map(item => {
        return {
          ID: item.id,
          Name: item.name,
          Phone: item.phone
        };
      });
      // Convert json data to sheet data let sheet = xslx.utils.json_to_sheet(arr),
      // Create a new table book = xslx.utils.book_new();
      //Insert a sheet into the table
      xslx.utils.book_append_sheet(book, sheet, "sheet1");
      // Write the file through the writeFile method of xlsx xslx.writeFile(book, `user${new Date().getTime()}.xls`);

      loadingInstance.close();
      this.disabled = false;
    }