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

2024-04-18 0 424

在使用 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秒内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • js使用xlsx读取excel文件的详细步骤
  • 前端使用xlsx库导出带有样式的excel文件
  • 前端使用xlsx导出数据生成Excel文件的全过程

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript 解决前端使用xlsx.js工具读取excel遇到时间日期少43秒问题 https://www.u-9.cn/biancheng/javascript/186775.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务