前端解析excel表格数据

前言

前端解析excel表格数据 ，自己解析数据时遇到点麻烦对数据无从下手

组件库

npm安装 npm i xlsx --s

上代码

将组件库安装好了之后就可以直接使用XLSX了

    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {type: 'binary'});
      // 这个时候我们打印workbook 对数据处理无从下手的
     }

打印数据如下，我当时也懵了好一会 后面在iview里面找到了同样的类功能，去源码库里面看到解决方法

    function analysisExcel (file) {
        var reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {type: 'binary'});
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const header = get_header_row(worksheet); // 第一行头部的数据
          const results = XLSX.utils.sheet_to_json(worksheet); // 后面对应的每行数据
          console.log(header, results)
         }
     }
     
    // 表格头部数据
    function get_header_row(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
          var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
          var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
          headers.push(hdr)
      }
      return headers
    }

总结

xlsx的很多方法在github上并没有啥说明，自己第一次直接处理起来还是很麻烦的。希望此篇文章能够帮助到大家