XLSX学习笔记

前端导入Excel表,需要对Excel进行解析,最终转换成json格式的数据

FileReader

上传文件肯定少不了这个,这属于H5的读取文件的一个类,在原生input上传file,我们通过e.target.files[0]就可以拿到文件的File对象,通过FileReader转换成我们需要的数据格式.

change (e) {
      const file = e.target.files[0];
      // 创建FileReader实例
      const reader = new FileReader()
      // 文件阅读完毕会走的钩子函数
      reader.onload = event => {
        const data = event.target.result
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const header = this.getHeaderRow(worksheet)
        console.log(header)
        //转换成json格式
        const results = XLSX.utils.sheet_to_json(worksheet)
        console.log(results)
      }
      //读取文件
      reader.readAsArrayBuffer(file)
    },

读取表头的方法

getHeaderRow (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 */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    }

最后再把得到的header和results都传给一个成功的回调函数,把这些封装组件,组件调用直接传一个函数就能得到header和results这两个参数了.