vue使用XLSX 读取excel日期格式的单元格问题

Dear小破

已于 2023-04-19 10:23:20 修改

阅读量2.8k

点赞数 2

文章标签： excel

于 2023-02-07 09:34:46 首次发布

本文链接：https://blog.youkuaiyun.com/zhangruiwan/article/details/128911877

版权

在Vue项目中处理Excel模板导入时，遇到日期格式问题，通过XLSX库添加`cellDates:true`参数可正确读取日期。解析出的日期如2024-03-21T15:59:17.000Z，后台可直接存储，前端展示需格式化。提供了后台字段注解和前端函数`parseTime`两种格式化方法。注意，XLSX解析的日期可能小一天，可通过加1天处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要给一个vue项目，做一个excel模板导入功能，使用XLSX读取日期格式的单元格，解析出来总是一串数字，但是为规范模板填写的内容，必须对一些单元格进行日期格式设置。

查询资料，终于找到最简单的解决方案，读取excel，增加 cellDates: true 参数，如下：

var wb = XLSX.read(binary, {
  type: 'binary',
  cellDates: true
})

记录下来，给有需要的人！

基于有小伙伴问，解析出来的日期类似2024-03-21T15:59:17.000Z这种格式，这是日期格式，针对后台的日期类型字段，可以直接存储，展示时候需要格式化一下，有两种方式可以处理日期字段的展示：

1.可以在后台日期属性的字段上加注解

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")

private Date createTime;

2.可以在前端展示时候格式化处理

function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

另：

XLSX将excel中的日期内容解析后会发现，比实际填写的小一天，处理方式就是，解析表格数据时候把日期格式的字段格式化一下，加1天，具体代码如下：

excelDateFormat(date) { // 日期转换
  if (date === undefined || date === null || date === '') {
    return null
  }
  // 非时间格式问题  返回Invalid date
  const retFormat = moment(date).format('YYYY-MM-DD')
  if (retFormat === 'Invalid date') {
    return retFormat
  }
  return moment(date).add(1, 'days').format('YYYY-MM-DD')
},

用法：

当然，如果整列数据比较规范，不像我这种需要一个单元格一个单元格的去读数据的情形，可以批量处理：

excelDateFormat(row, columnName) { // 日期转换
  var date = row[columnName]
  if (date === undefined || date === null || date === '') {
    return null
  }
  // 非时间格式问题  返回Invalid date
  const retFormat = moment(date).format('YYYY-MM-DD')
  if (retFormat === 'Invalid date') {
    return retFormat
  }
  return moment(date).add(1, 'days').format('YYYY-MM-DD')
},

结语：记录使我快乐，能帮助到大家，我更快乐！