解決前端使用xlsx.js工具讀取excel遇到時間日期少43秒問題

更新時間：2024年03月30日 09:49:29 作者：七月pro

這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時間日期少43秒問題的相關(guān)資料,xlsx.js是一種前端庫,它可以使您使用JavaScript讀取、解析和導出電子表格文件,如Microsoft Excel,需要的朋友可以參考下

在使用 xlsx 讀取 excel 的時間格式的數(shù)據(jù)時，如 ‘2023-11-30’，‘2023/11/30’ ，默認會讀取一串數(shù)字字符串，如：‘45260’，此時需要在 read 的時候傳入一個配置項：

import { read } from 'xlsx'

const workbook = read(fileData, {
    type: 'binary',
    cellDates: true, // 讀取日期格式的數(shù)據(jù)
})

此時拿到的是標準的時間格式：‘Wed Nov 29 2023 23:59:17 GMT+0800(中國標準時間)’ ，這個時間格式是帶時區(qū)的，有沒有發(fā)現(xiàn)，只要輸入年月日，讀到的數(shù)據(jù)總是差 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 = {} // 解析結(jié)果
    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
      })
      // 檢查數(shù)據(jù)的合法性
      // 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>

總結(jié)

到此這篇關(guān)于解決前端使用xlsx.js工具讀取excel遇到時間日期少43秒問題的文章就介紹到這了,更多相關(guān)前端讀取excel時間日期少43秒內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: