前端使用 xlsx 读取复杂excel 文件，例如，设置从第几行开始读取、空数据设置默认值

前端下载excel文件、读取excel文件内容请参考

前端开发中使用xlsx读取excel文件内容时，有时候我们要跳过excel 文件里某一行的内容，或者对空数据设置默认值时，可以参考如下操作

如下图中的excel文件内容

例如：从某一行开始读取excel文件内容

我们在读取的时候需要跳过第一行的标题，读取下面的内容

比如：使用 xlsx 的sheet_to_json 方法时，我们可以设置range参数

 //sheet_to_json 方法接收两个参数，第一个为sheet对象，第二个为配置参数
 XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],{range:1});

完整示例：

<template>
  <div class="home">
    <input type="file" @change="readFile">
    <div class="table">
      <el-table :data="excelData">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      excelData:[],//读取到的excel文件内容
    }
  },
  methods:{
    readFile(e){//上传文件后读取excel文件内容
      let file = e.target.files[0];
      const types = ["xlsx", "xls"];
      const arr = file.name.split(".");
      //判断文件是否为excel文件
      if (!types.find(item => item === arr[arr.length - 1])) {
        alert('请选择正确的文件类型');
        return;
      }
      let reader = new FileReader();
      //启动函数
      reader.readAsBinaryString(file);
      reader.onload = e => {
        console.log(e);
        //workbook存放excel的所有基本信息
        let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
        //定义sheetList中存放excel表格的sheet表，就是最下方的tab
        let sheetList = workbook.SheetNames;
        //读取文件内容，（第一个sheet里的内容）
        // range：设置从第几行开始读取内容
        let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],{range:1});
        console.log(json);
      };

    }
  }
}
</script>
<style lang="scss" scoped>

</style>

一般来说，excel文件header行都是中文，我们可以把对应的key转为英文，并展示到页面上

<template>
  <div class="home">
    <input type="file" @change="readFile">
    <div class="table">
      <el-table :data="excelData">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="grade" label="班级"></el-table-column>
          <el-table-column prop="verbal" label="语文"></el-table-column>
          <el-table-column prop="math" label="数学"></el-table-column>
          <el-table-column prop="english" label="英语"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      excelData:[],//读取到的excel文件内容
    }
  },
  methods:{
    readFile(e){//上传文件后读取excel文件内容
      let file = e.target.files[0];
      const types = ["xlsx", "xls"];
      const arr = file.name.split(".");
      //判断文件是否为excel文件
      if (!types.find(item => item === arr[arr.length - 1])) {
        alert('请选择正确的文件类型');
        return;
      }
      let reader = new FileReader();
      //启动函数
      reader.readAsBinaryString(file);
      reader.onload = e => {
        console.log(e);
        //workbook存放excel的所有基本信息
        let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
        //定义sheetList中存放excel表格的sheet表，就是最下方的tab
        let sheetList = workbook.SheetNames;
        //读取文件内容，（第一个sheet里的内容）
        // range：设置从第几行开始读取内容
        let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],{range:1});
        //转换json 中的key为英文并展示到页面
        let data = json.map(item=>{
          let arr = {};
          Object.keys(item).forEach(key=>{
            switch (key) {
              case '姓名':
                arr.name = item[key];
                break;
              case '班级':
                arr.grade = item[key];
                break;
              case '语文':
                arr.verbal = item[key];
                break;
              case '数学':
                arr.math = item[key];
                break;
              case '英语':
                arr.english = item[key];
                break;
              default:
                break;
            }
          })
          return arr;
        })
        this.excelData = data;
      };

    }
  }
}
</script>
<style lang="scss" scoped>

</style>

对空数据设置默认值

还以上面的excel为例，比如数据中有两行是空的，在读取时，想要给空数据设置一个默认值

//sheet_to_json 方法的第二个参数中设置  defval  字段，对空数据设置默认值
XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],{range:1,defval:'缺考'});

<template>
  <div class="home">
    <input type="file" @change="readFile">
    <div class="table">
      <el-table :data="excelData">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="grade" label="班级"></el-table-column>
          <el-table-column prop="verbal" label="语文"></el-table-column>
          <el-table-column prop="math" label="数学"></el-table-column>
          <el-table-column prop="english" label="英语"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      excelData:[],//读取到的excel文件内容
    }
  },
  methods:{
    readFile(e){//上传文件后读取excel文件内容
      let file = e.target.files[0];
      const types = ["xlsx", "xls"];
      const arr = file.name.split(".");
      //判断文件是否为excel文件
      if (!types.find(item => item === arr[arr.length - 1])) {
        alert('请选择正确的文件类型');
        return;
      }
      let reader = new FileReader();
      //启动函数
      reader.readAsBinaryString(file);
      reader.onload = e => {
        console.log(e);
        //workbook存放excel的所有基本信息
        let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
        //定义sheetList中存放excel表格的sheet表，就是最下方的tab
        let sheetList = workbook.SheetNames;
        //读取文件内容，（第一个sheet里的内容）
        // range：设置从第几行开始读取内容
        let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],{range:1,defval:'缺考'});
        //转换json 中的key为英文并展示到页面
        let data = json.map(item=>{
          let arr = {};
          Object.keys(item).forEach(key=>{
            switch (key) {
              case '姓名':
                arr.name = item[key];
                break;
              case '班级':
                arr.grade = item[key];
                break;
              case '语文':
                arr.verbal = item[key];
                break;
              case '数学':
                arr.math = item[key];
                break;
              case '英语':
                arr.english = item[key];
                break;
              default:
                break;
            }
          })
          return arr;
        })
        this.excelData = data;
      };

    }
  }
}
</script>
<style lang="scss" scoped>

</style>