vue纯前端导入excel，获取excel的表格数据渲染el-table并纯前端分页实现方法

因为项目开发的过程中不是所有的表格数据由后台处理返回，因为有些数据不需要在数据库落地，只做前端页面展示并且获取表格的数据上传即可，所以需要前端纯处理excel的数据。

第一步首先把插件安装好

npm install xlsx --save

第二步在vue页面中导入XLSX

<script>
    import XLSX from 'xlsx'
</script>

第三步页面实现

<el-upload ref="upload" action="/" :show-file-list="false" :on-change="importExcel" :auto-upload="false">
   <el-button class="d2-mt-10 d2-mb-10" slot="trigger" icon="el-icon-upload" type="primary">
      上传人员
   </el-button>
</el-upload>

<el-table :data="memberList" highlight-current-row border style="width: 100%" height="600" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="table-fixed-lineBug">
  <el-table-column prop="cyrxm" label="参会人姓名" align="center" min-width="150" show-overflow-tooltip/>
  <el-table-column prop="cyrjsmc" label="参会人角色" align="center" min-width="150" show-overflow-tooltip/>
  <el-table-column prop="sfzhm" label="身份证号码" align="center" min-width="200" show-overflow-tooltip/>
  <el-table-column prop="sjh" label="手机号码" align="center" min-width="150" show-overflow-tooltip/>
  <el-table-column prop="iszcr" label="是否主持人" align="center" width="110" show-overflow-tooltip/>
  <el-table-column prop="isgly" label="是否会议管理员" align="center" width="130" show-overflow-tooltip/>
  <el-table-column prop="ispt" label="是否旁听" align="center" width="130" show-overflow-tooltip/>
</el-table>
<el-pagination @current-change="handleCurrentChange(currentPage)" :current-page.sync="currentPage" :page-size="5" layout="total, prev, pager, next" :total="memberList.length" align="right">
</el-pagination>

第四步js

<script>  
    import XLSX from 'xlsx' 
    export default {
        name: '',
        components: {},
        props: {
        },
        data() {
            return {
                memberList: [],
                xlscList:[],
                wb: null,
                currentPage: 1,
            }
        },
        methods: {
            handleCurrentChange(index) {       //currentPage变动时触发，index值为当前页前端实现分页
            console.log(this.memberList)
                this.currentPage = index
                // this.memberLists = this.memberList.slice((index - 1) * 5, index * 5)             //将初始数据进行裁剪赋值给新数组
                this.$set(this._data,'memberLists',this.memberList.slice((index - 1) * 5, index * 5)  )
        },
            //第一步上传文件
            importExcel(file) {
                let self = this;
                const types = file.name.split(".")[1];
                const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
                  item => item === types
                );
                console.log(fileType)
                if (!fileType) {
                   alert("格式错误！请重新选择");
                  return;
                }
                this.file2Xce(file).then(tab => {
                  // console.log(tab)
                  if (tab && tab.length > 0) {
                    this.tab = tab;
                    if (this.tab.length != 0) {
                      console.log(tab)
                      this.xlscList = [];
                      this.tab[0].sheet.forEach(item => {
                        // console.log(item.indexOf("C") != -1)
                        if (item.indexOf("") != -1) {
                          let inputInfo = item.split("'");//excel的数据类型都是text所以通过item.split("'")截取，拿到所以表的数据
                          if (inputInfo.length == 2) {
                            self.xlscList.push(inputInfo[1]);
                            // console.log(self.xlscList)
                          }
                        }
                      });
                    }
                    if (this.xlscList.length != 0) {
                      this.setInputToForm();
                    }
                  }
                });
            },
            //对组进行切割
            setInputToForm(){
                if (this.xlscList.length >= 7) {//判断表头的长度
                  /*
                  * 将一个数组分成几个同等长度的数组
                  * array[分割的原数组]
                  * size[每个子数组的长度]
                  */
                  this.xlscList=this.xlscList.slice(7)
                  // console.log()
                  let result = [];
                  let personnelList = []
                  for (var x = 0; x < Math.ceil(this.xlscList.length / 7); x++) {
                      var start = x * 7;
                      var end = start + 7;
                      result.push(this.xlscList.slice(start, end));
                  }
                  // console.log(result)
                  //获取每一个数组的第一个，第二个，第三个...通过push重新拼装成一个新的数组对象
                  for(let i = 0;i<result.length;i++) {
                    for(let j = 0;j<result[i].length;j++) {
                      if(j == 0) {
                        personnelList.push({cyrjsmc:result[i][j],cyrxm:result[i][j+1],sfzhm:result[i][j+2],sjhm:result[i][j+3],sfzcrmc:result[i][j+4],sfglymc:result[i][j+5],sfptmc:result[i][j+5]})
                      }
                    }
                  }
                  this.memberList = personnelList;
                  this.handleCurrentChange(1);
                }else{
                  this.$message({
                    message: '上传格式不對',
                    type: 'warning'
                  })
                }
            },
            file2Xce(file) {
                return new Promise(function(resolve, reject) {
                  const reader = new FileReader();
                  reader.onload = function(e) {
                    const data = e.target.result;
                    this.wb = XLSX.read(data, {
                      type: "binary"
                    });
                    const result = [];
                    this.wb.SheetNames.forEach(sheetName => {
                      result.push({
                        sheetName: sheetName,
                        sheet: XLSX.utils.sheet_to_formulae(this.wb.Sheets[sheetName])
                      });
                    });
                    resolve(result);
                  };
                  reader.readAsBinaryString(file.raw);
                });
            },
        }
    }
</script>

导入的excel格式

效果图

这样就轻松实现了，有什么不对的欢迎吐槽

本文转自 https://blog.csdn.net/weixin_39277183/article/details/115530518，如有侵权，请联系删除。