上传本地.xlsx(.xls)文件，实现页面表格数据预览

预览的表格数据如下图

element-ui 里面的组件

 <el-dialog title="新建任务" :visible.sync="dialogTableVisible" fullscreen>
      <div class="app-container home">
        <div>
          <div class="crenter">
            <div class="flex-box">
              <el-form :model="form">
                <el-form-item label="任务名称:" label-width="100px">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div style="margin-right: 10px">
                <el-button @click="handleDownLoad" type="success"
                  >下载模版</el-button
                >
              </div>
            </div>
            <div class="up-box" style="margin-bottom: 50px">
              <p>上传文件：</p>
              <el-upload
                ref="upload"
                class="upload-demo"
                :on-change="onChange"
                drag
                action="javascript:void(0)"
                multiple
                accept=".xlsx,.xls"
                :on-exceed="exceed"
                :limit="1"
                :on-remove="remove"
                :http-request="uploadFile"
              >
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </div>

            <div v-if="newArrList.length" style="text-align: center">
              <!-- 表格数据 -->
              <el-table border :data="newArrList" style="width: 100%">
                <el-table-column
                  prop="fgsm"
                  label="分公司名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="fjm"
                  label="分局名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="wgm"
                  label="网格名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="jzm"
                  label="基站名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="lac"
                  label="LAC"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="cell"
                  label="CELL"
                  align="center"
                ></el-table-column>
              </el-table>

              <!-- 分页 -->
              <div style="margin-top: 15px">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[3, 5, 7]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="listTable.length"
                >
                </el-pagination>
              </div>
            </div>
            <div
              v-if="newArrList.length"
              style="
                display: flex;
                align-item: center;
                justify-content: center;
                margin-top: 60px;
              "
            >
              <el-button @click="handleUpload" style="" type="primary"
                >提交</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

下载xlsx插件（不要下载最新版本，亲测最新版本下载的文件打不开！！！）

`npm install xlsx@0.16.8 --save`

   <script>
   //引入xlsx 
   import XLSX from "xlsx";
    //解析excel 生成表格
    async uploadFile(params) {
    //   console.log("params", params);
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          // console.log(data)
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            //若当前sheet没有数据，则continue
            if (sheetArray.length == 0) {
              continue;
            }
            console.log("读取文件");
            console.log(sheetArray.slice(1));  //删除模版数据的第一行
            for (let item in sheetArray.slice(1)) {
              let rowTable = {};
              //这里的rowTable的属性名注意要与上面表格的prop一致
              //sheetArray的属性名与上传的表格的列名一致
              rowTable.cell = sheetArray[item].CELL;
              rowTable.lac = sheetArray[item].LAC;
              rowTable.fgsm = sheetArray[item].分公司名;
              rowTable.fjm = sheetArray[item].分局名;
              rowTable.jzm = sheetArray[item].基站名;
              rowTable.wgm = sheetArray[item].网格名;
              this.listTable.push(rowTable);
              this.newArrList = this.queryByPage();
            }
          }
        } catch (e) {
          this.$message.warning("文件类型不正确！");
        }
      };
      fileReader.readAsBinaryString(_file);
    },
    //前端实现分页
     handleSizeChange(val) {
      this.pageSize = val;
      // this.getResultsData();
      this.newArrList = this.queryByPage();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getResultsData();
      this.newArrList = this.queryByPage();
      console.log(`当前页: ${val}`);
    },
    // 实现分页的方法
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize;
      console.log(start);
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize;

      return this.listTable.slice(start, end);
    },
</script>