前后端Excel处理篇——前端js-xlsx解析数据

5,644 阅读2分钟

遇到一个excel数据上传的需求,查阅excel上传解析的资料,比较通用的有后端POIeasyExcel等,前端为js-xlsx,考虑到后端上传的方案数据直接解析到数据库中,用户无法对从excel上传的数据进行编辑,决定采用js-xlsx前端解析的方式,这样比较灵活。

1、简介

SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xlsxlsxods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

官方github:github.com/SheetJS/js-…


2、js-xlsx解析excel后的对象

Excel名词:js-xlsx中的抽象类型

工作簿:workBook

工作表:Sheets

Excel引用样式(单元格地址):cellAddress

单元格:cell

单元格对象

每一个单元格是一个对象(Cell Object

keyvalue
v原始值
w格式化文字
ttype: b Boolean, e Error, n Number, d Date, s Text, z Stub
fcell formula encoded as an A1-style string (if applicable)
Frange of enclosing array if formula is array formula (if applicable)
rrich text encoding (if applicable)
hHTML rendering of the rich text (if applicable)
ccomments associated with the cell
znumber format string associated with the cell (if requested)
lcell hyperlink object (.Target holds link, .Tooltip is tooltip)
sthe style/theme of the cell (if applicable)

3、主要Api

js-xlsx提供的接口非常清晰主要分为两类:

xlsx对象本身提供的功能

  • 解析数据
  • 导出数据

utils工具类

  • 将数据添加到数据表对象上
  • 将二维数组以及符合格式的对象或者HTML转为工作表对象
  • 将工作簿转为另外一种数据格式
  • 行,列,范围之间的转码和解码
  • 工作簿操作
  • 单元格操作

4、excel解析

读取excel主要是通过XLSX.read(data, {type:type});方法来实现,返回一个叫WorkBook的对象,type主要取值如下: base64binary``、stringbufferarrayfile 这里我偷懒只用了binary,其他几种没有测试。。。

excel解析选项

type默认值含义
typeexcel编码,主要包括base64、binary、string、buffer、array、file等几种
rawfalse是否只解析原始值
codepageIf specified, use code page when appropriate **
cellFormulatrue存储格式化值在单元格对象f字段
cellHTMLtrueParse rich text and save HTML to the .h field
cellNFfalseSave number format string to the .z field
cellStylesfalseSave style/theme info to the .s field
cellTexttrueGenerated formatted text to the .w field
cellDatesfalseStore dates as type d (default is n)
dateNFIf specified, use the string for date code 14 **
..................

excle解析代码

     //1、解析出excel格式
      this.wb = XLSX.read(data, {
        type: 'binary',
        cellNF: true,
        raw: true
      })
     //2、SheetNames以字符串数组的形式保存了所有的工作表的名称,通过XLSX.utils.sheet_to_json转化为json格式
      this.wb.SheetNames.forEach(sheetName => {
        result.push({
          sheetName: sheetName,
          sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName], { raw: true })
        })
      })
      //3、中英文转换,将对应的中文key转化为自己想要的英文key
        function dateTransition(data, transitionJSON) {
          const list = []
          var obj = {}
          var outdata = JSON.parse(data)
          // 数组循环
          for (var i = 0; i < outdata.length; i++) {
            obj = {}
            // 循环一行数据中每一个对象
            for (var key in outdata[i]) {
              obj[transitionJSON[key]] = outdata[i][key]
            }
            list.push(obj)
          }
          return list
        }

5、日期格式转换

js-xlsx在解析excel日期格式时(excel单元格的格式为自定义日期格式),会自动转换为数字格式,尝试了解析选项中的cellDatesdateNF等选项,结果还是不尽如人意,最后考虑通用性问题,采用函数方式转换为时间戳,代码如下。

    formatDate(numb) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      time.setMonth(time.getMonth())
      time.setHours(time.getHours() - 8)
      time.setMinutes(time.getMinutes())
      time.setMilliseconds(time.getMilliseconds())
      return time.valueOf()
    }

总结

主要总结了使用js-xlsx解析excel的过程和一些关键点,excel导出等功能我使用的是vxe-table等库,就没有研究这方面。

参考:

www.cnblogs.com/vicky-li/p/… www.cnblogs.com/liuxianan/p…