解决前端使用xlsx.js工具读取excel遇到时间日期少43秒问题

 更新时间:2024年03月30日 09:49:29   作者:七月pro  
这篇文章主要给大家介绍了关于如何解决前端使用xlsx.js工具读取excel遇到时间日期少43秒问题的相关资料,xlsx.js是一种前端库,它可以使您使用JavaScript读取、解析和导出电子表格文件,如Microsoft Excel,需要的朋友可以参考下

在使用 xlsx 读取 excel 的时间格式的数据时,如 ‘2023-11-30’,‘2023/11/30’ ,默认会读取一串数字字符串,如:‘45260’,此时需要在 read 的时候传入一个配置项:

import { read } from 'xlsx'

const workbook = read(fileData, {
    type: 'binary',
    cellDates: true, // 读取日期格式的数据
})

此时拿到的是标准的时间格式 :‘Wed Nov 29 2023 23:59:17 GMT+0800(中国标准时间)’ ,这个时间格式是带时区的,有没有发现,只要输入年月日,读到的数据总是差 43 秒,解决思路也很粗暴,判断是这个时间,直接加 44 秒。

if(dateStr){
    if(dateStr?.includes('23:59:17')) {
        dateStr = dayjs(dateStr).add(44, 'second')
    }
    // 如果需要可以格式化成需要的格式
    const dayObj = dayjs(dateStr.toString())
    if(dayObj.isValid()) {
        dateStr = dayObj.format('YYYY-MM-DD')
    }
    return dateStr
}

附:element-plus el-upload 读取 xlsx 格式的 excel 文件的步骤

<template>
  <el-upload
    ref="uploadRef"
    action=""
    :auto-upload="false"
    :on-change="onSelectFile"
    :on-remove="onRemoveFile"
    :file-list="fileList"
    accept=".xlsx">
    <el-button type="primary">导入</el-button>
  </el-upload>
  <br>
  <el-button @click="handleExport">导出</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile, UploadRawFile } from 'element-plus'
import { read, utils, writeFile } from 'xlsx'

type IExcel = Record<string, Array<Record<string, string>>>

const fileList = ref<{name: string}[]>([])
const importData = ref<IExcel | null>(null)

async function onSelectFile(file: UploadFile) {
  reset()
  if(file.raw) {
    if(file.raw.type !== 'application/vnd.openxmlformats-offocedocument.spreadsheetml.sheet') {
      return '请上传 xlsx 格式文件'
    }
    if(file.raw.size / 1024 / 1024 > 10) {
      return '文件格式不能超过 10M'
    }
    fileList.value.push({ name: file.raw.name })
    // 解析文件
    const raw = file.raw
    const res = await readFile2Binary(raw)
    const resInfo: IExcel = {} // 解析结果
    if(res) {
      const workbook = read(res, {
        type: 'binary',
        cellDates: true,
      })
      workbook.SheetNames.forEach((sheetName) => {
        const excelData: Record<string, string>[] = utils.sheet_to_json(workbook.Sheets[sheetName])
        resInfo[sheetName] = excelData
      })
      // 检查数据的合法性
      // if(validXLSX(resInfo)) {
      //   importData.value = resInfo
      // }
      importData.value = resInfo
    }
  }
}

// 重置
function reset() {
  fileList.value = []
  // ...
}
function onRemoveFile() {
  reset()
}

/**
 * 将 el-upload 选择的文件读取成二进制
 * @param raw 
 */
function readFile2Binary(raw: UploadRawFile) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsBinaryString(raw)
    reader.onload = (ev) => {
      if(ev.target) {
        resolve(ev.target.result)
      } else {
        reject()
      }
    }
  })
}

/**
 * 导出
 */
function handleExport() {
  const sheetList = {
    sheet1: [],
    sheet2: [],
  }
  const fileName = 'xxx.xlsx'
  const workbook = utils.book_new()
  for(const key in sheetList) {
    const sheetName = key
    const worksheet = utils.aoa_to_sheet(sheetList[key])
    utils.book_append_sheet(workbook, worksheet,sheetName)
  }
  writeFile(workbook, fileName, {
    bookType: 'xlsx',
  })
}
</script>

总结 

到此这篇关于解决前端使用xlsx.js工具读取excel遇到时间日期少43秒问题的文章就介绍到这了,更多相关前端读取excel时间日期少43秒内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何基于layui的laytpl实现数据绑定的示例代码

    如何基于layui的laytpl实现数据绑定的示例代码

    这篇文章主要介绍了如何基于layui的laytpl实现数据绑定的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Chrome Form多次提交表单问题的解决方法

    Chrome Form多次提交表单问题的解决方法

    第一次提交可以,第二次提交就没有任何响应了。需要重新加载页面后才可以提交,而这个问题在Firefox,IE下没有出现。
    2011-05-05
  • JavaScript Blob对象原理及用法详解

    JavaScript Blob对象原理及用法详解

    这篇文章主要介绍了JavaScript Blob对象原理及用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JS中dom0级事件和dom2级事件的区别介绍

    JS中dom0级事件和dom2级事件的区别介绍

    这篇文章主要介绍了JS中dom0级事件和dom2级事件的区别介绍,非常有参考价值,特此分享到脚本之家平台供大家参考
    2016-05-05
  • JS俄罗斯方块,包含完整的设计理念

    JS俄罗斯方块,包含完整的设计理念

    由于该游戏属于二维游戏,所以布置好网格是写好该游戏的关键,无论是游戏窗口还是预览窗口
    2010-12-12
  • JavaScript统计字符出现次数

    JavaScript统计字符出现次数

    这篇文章主要为大家详细介绍了JavaScript字符统计出现次数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

    JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

    这篇文章主要给大家介绍了关于利用Javascript如何禁止浏览器右键查看元素,或者通过按F12审查元素,触犯这两个条件会自动并关闭页面的相关资料,通过设置这个可以防止别人扒下自己的网页,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 使用Echarts绘制一个多组折线图

    使用Echarts绘制一个多组折线图

    这篇文章主要给大家介绍了关于使用Echarts绘制一个多组折线图的相关资料,Echarts是一个功能强大的可视化库,可以用来绘制各种类型的图表,包括多组折线图,需要的朋友可以参考下
    2023-09-09
  • 深入JS函数中默认参数的使用详解

    深入JS函数中默认参数的使用详解

    本文主要介绍了深入JS函数中默认参数的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论