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

这篇具有很好参考价值的文章主要介绍了前端使用 xlsx.js 工具读取 excel 遇到时间日期少 43 秒的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在使用 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 文件的步骤文章来源地址https://www.toymoban.com/news/detail-763148.html

<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 秒的解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端结合xlsx.js+xlsx-style.js源码实现自定义excel文件导出

          js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 创建一个excel会经历以下过程: 创建一个工作薄 创建一个sheet 创建表格行列等

    2024年03月10日
    浏览(71)
  • vue中使用xlsx读取excel文件

    在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖 这里使用的h5原生文件上传项 其中 multiple 属性允许上传多个文件 其中,可以发现fileList是一个类数组,由传入的file对象组成。每个file对象包含一下属性: 属性 属性值 描述 lastModified Number 表示最近一次的修改时间

    2024年02月02日
    浏览(46)
  • sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式

    xlsx 地址:https://www.npmjs.com/package/xlsx SheetJs 地址:https://docs.sheetjs.com/docs/ xlsx-js-style 地址:https://www.npmjs.com/package/xlsx-js-style !cols 设置列宽 cols 为一个对象数组,依次表示每一列的宽度 wpx 字段表示以像素为单位,wch 字段表示以字符为单位 hidden 如果为真,则隐藏该列 !rows 设

    2024年02月06日
    浏览(43)
  • 【前端】Vue中引入excel模板并下载以及XLSX使用

    模板存放位置 src/assets/excelTemplate/模板.xls 安装模块包 新增配置,在vue.config.js中,自己比较一下,最后一段新增的chainWebpack 即可将模板下载到本地 我使用XLSX的场景,在我上传excel的时候,我需要获取它的表头以及里面的数据进行渲染到表格中,在我编辑的时候需要请求Exce

    2024年02月21日
    浏览(46)
  • 使用JavaScript和XLSX.js将数据导出为Excel文件

    导出数据是Web应用程序中常见的功能之一。在许多情况下,我们需要将数据导出为Excel文件,以便用户可以在本地计算机上查看和编辑数据。在本篇博客中,我们将介绍如何使用JavaScript和XLSX.js将数据导出为Excel文件。 XLSX.js是一个JavaScript库,它提供了一组API,可以将数据转换

    2024年04月26日
    浏览(39)
  • 前端中不同格式的日期相互转换(字符串、时间戳)js相关

    在项目中遇到了,需要实现字符串和Unix时间戳的相互转换,随手记录一下。 我使用的组件库为Naive UI,涉及到的组件为日期选择器(Date Picker)。作者在文档中写道: 实话说我不喜欢这个 feature,因为多数情况下,传递时间字符串不是个最佳实践。但是现实世界是复杂的,我

    2024年02月02日
    浏览(66)
  • 【Unity】用Excel库读取Excel表格(.xlsx或者.xls)

    首先需要下载解析的库  EPPlus,  Excel,  ICSharpCode.SharpZipLib    下载链接: https://download.csdn.net/download/weixin_46472622/87238048 使用方法 我的Excel 表格是这样的,每一列有一个 我用一个结构体对象来表示 读取的方法  全部代码,以及调用: 如果是打包PC端的exe,需要将编辑

    2024年02月12日
    浏览(45)
  • C# 读取 Excel xlsx 文件,显示在 DataGridView 中

    编写 read_excel.cs 如下 SET PATH=C:WINDOWSMicrosoft.NETFrameworkv4.0.30319;%PATH% 编译:csc.exe  /t:exe read_excel.cs   环境:win10 64位系统 运行 yourpathread_excel.exe  test1.xlsx 错误信息:未在本地计算机上注册“ Microsoft.ACE.OLEDB.12.0 ”提供程序。 搜索 Microsoft Access Database Engine 2016  我先下载了

    2024年02月07日
    浏览(52)
  • 前端实现(excel)xlsx文件预览

    使用的框架: React 要使用的库: exceljs、handsontable 接到一个任务,是要前端实现文件预览效果,百度了一圈,发现也没有什么好的方法可以完美的将表格渲染出来。在前端中有 sheetjs 和 exceljs 可以对xlsx文件进行解析,本来一开始我用的是 sheetjs ,但是在样式获取上遇到了麻烦,

    2024年02月06日
    浏览(54)
  • xlsx库实现纯前端导入导出Excel

    最近做了前端导入、导出 Excel 的需求,用到了 js-xlsx 这个库,该库文档提供的用例很少,并不是很友好。本文总结一下我是如何实现需求的。 提供一个 Excel 文件,将里面的内容转成 JSON 导入数据 提供一个 JSON 文件,生成 Excel 文件并导出 导入与导出既可以前端做,也可以后

    2023年04月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包