js-xlsx

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

1、简介

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

官方github：https://github.com/SheetJS/js-xlsx

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

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

工作簿：workBook

工作表：Sheets

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

单元格：cell

单元格对象

每一个单元格是一个对象（Cell Object）

key	value
v	原始值
w	格式化文字
t	type: b Boolean, e Error, n Number, d Date, s Text, z Stub
f	cell formula encoded as an A1-style string (if applicable)
F	range of enclosing array if formula is array formula (if applicable)
r	rich text encoding (if applicable)
h	HTML rendering of the rich text (if applicable)
c	comments associated with the cell
z	number format string associated with the cell (if requested)
l	cell hyperlink object (.Target holds link, .Tooltip is tooltip)
s	the style/theme of the cell (if applicable)

3、主要Api

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

xlsx对象本身提供的功能

解析数据
导出数据

utils工具类

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

4、excel解析

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

excel解析选项

type	默认值	含义
type		excel编码，主要包括base64、binary、string、buffer、array、file等几种
raw	false	是否只解析原始值
codepage		If specified, use code page when appropriate **
cellFormula	true	存储格式化值在单元格对象f字段
cellHTML	true	Parse rich text and save HTML to the .h field
cellNF	false	Save number format string to the .z field
cellStyles	false	Save style/theme info to the .s field
cellText	true	Generated formatted text to the .w field
cellDates	false	Store dates as type d (default is n)
dateNF		If 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单元格的格式为自定义日期格式），会自动转换为数字格式，尝试了解析选项中的cellDates，dateNF等选项，结果还是不尽如人意，最后考虑通用性问题，采用函数方式转换为时间戳,代码如下。

    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等库，就没有研究这方面。

参考：

https://www.cnblogs.com/vicky-li/p/11469100.html
https://www.cnblogs.com/liuxianan/p/js-excel.html