vue3采用xlsx库实现上传excel文件，前端解析展示数据（日期转换问题解决）

项目中需要实现点击导入excel文件后前端进行解析，将数据展示在页面上，确认后上传至后台的功能，为了便于用户查看，可将所有已上传至后台的数据重新展示在页面表格中。具体实现步骤如下：

1、下载插件

npm install xlsx --save

2.引入依赖

import * as XLSX from "xlsx"

3.导入功能实现

<template>
  <div class="box">
     <input
         type="file"
         accept=".xls,.xlsx"
         @change="chooseExcel($event)"
          />
    </div>
</template>

<script setup lang="ts">
    function chooseExcel(e: any) {
       const files = e.target.files;
       if (files.length <= 0) {
          return false;
       } 
       else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
          ElMessage({
             message: "上传格式不正确，请上传xls或者xlsx格式！",
             type: "error",
          });
          return false;
    }
    // 读取表格数据
    const fileReader = new FileReader();
    fileReader.onload = (ev) => {
       const workbook = XLSX.read(ev.target.result, {
            type: "binary",
            cellDates: true,
       });
       const wsname = workbook.SheetNames[0];
       const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
       dealExcel(ws); 
    };
    fileReader.readAsBinaryString(files[0]);
</script>

4.数据处理与转换

（1）实现代码如下：

function dealExcel(ws: any) {
    let exmap = {
       日期: "date",
       编号: "proNo",
       产品名称: "name",
       数量: "count",
    };
    ws.forEach((sourceObj: any) => {
      Object.keys(sourceObj).map((keys) => {
        let newKey = exmap[keys];
        if (newKey) {
           sourceObj[newKey] = sourceObj[keys];
           delete sourceObj[keys];
        }
      });
    });
}

（2）效果如下：

 转换后效果如下：

 5.表格中日期处理

数据处理方法中加一段代码，如下：

 if (ws != null && ws.length > 0) {
    for (var i = 0; i < ws.length; i++) {
      data.arrList.push({
        date: new Date(ws[i].date).toLocaleDateString(),
        proNo: ws[i].proNo,
        name: ws[i].name,
        count: ws[i].count,
      });
    }
  }

注意： 处理前的时间为中国标准时间，若不是可考虑其他方法。转换后的数据展示采用vue3的数据绑定即可实现，此处不进行代码讲解。

欢迎大家留言，谢谢支持！