vue2.0 使用xlsx读取excel文件数据 操作流程 以及文件中特殊日期数据的处理

18 篇文章 0 订阅
这篇博客介绍了在Vue项目中处理xlsx文件时遇到的日期数据转换问题。通过使用xlsx库,作者展示了如何读取Excel文件,特别是针对被转换成数字的反斜杠日期格式进行处理,将其转回日期格式。文章包含了一个Vue组件的源码示例,展示了文件读取、数据转换和日期格式化的方法。
摘要由CSDN通过智能技术生成

1. 安装xlsx依赖

cnpm install xlsx --save

2.需要处理的文件

这里有一个转换中经常会遇见的问题,就是带有反斜杠的日期数据被转换成了一串数字,在接下来的演示中提供了我现在在使用的手动将这串数字再转回成日期的方法
反斜杠日期数据不听话
日期输出需要手动转换

3.vue单页面源码

<template>
  <div class="hello">
    <h1>练习文件数据的读取</h1>
    <div class="table-div">
      <input
        type="file"
        ref="upload"
        accept=".xls,.xlsx"
        class="outputlist_upload"
      />
    </div>
  </div>
</template>

<script>
import { read, utils } from "xlsx";

export default {
  name: "HelloWorld",
  data() {
    return {
      outputs: [],
    };
  },
  mounted() {
    this.$refs.upload.addEventListener("change", (e) => {
      //绑定监听表格导入事件
      this.readExcel(e);
    });
  },
  methods: {
    readExcel(e) {
      var that = this;
      const files = e.target.files;
      // 如果没有文件名
      if (files.length <= 0) {
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确,请上传xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();

      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          // 切换为新的调用方式
          const workbook = read(data, {
            type: "binary",
          });
          // 取第一张表
          const wsname = workbook.SheetNames[0];
          // 切换为新的调用方式 生成json表格内容
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);

          console.log("处理之后的文件数据是::", ws); //  这里为大家演示文件中的日期数据的处理
          // 后续为自己对ws数据的处理
          //  这里处理一下反斜杠日期的数字化问题

          let newData = ws.map((item) => {

              return {
                '序号':item['序号'],
                '总磷(mg/L)':item['总磷(mg/L)'],
                '断面名称':item['断面名称'],
                '断面级别':item['断面级别'],
                '氨氮(mg/L)':item['氨氮(mg/L)'],
                '河流名称':item['河流名称'],
                '流向':item['流向'],
                '流向权重':item['流向权重'],
                "监测日期" :  item['监测日期'] >0 ?  this.formatDate(item["监测日期"], "-"):item['监测日期'],
                '考核目标':item['考核目标'],
                '高锰(mg/L)':item['高锰(mg/L)'],
              }
          });

          console.log("处理之后的日期是:", newData);// 2021/5/16-5/31  这样的组合写法在这里还没有完全处理

          /**
           *  接下来就能够使用  ==newData==  去正常读取   2022/10/5  和   2022.10.5  这样的xlsx表格中的日期数据了
           *  "监测日期" :  item['监测日期'] >0 ?  this.formatDate(item["监测日期"], "-"):item['监测日期'],  被转换成数字的2022/10/5的数据格式  那么使用转换    如果是 2022.10.5  的数据  则保持不变
           */

        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    //  处理日期格式  numb: 你的转换为日期的数据   format:你希望用什么样的间隔符隔开数据
    formatDate(numb, format) {
      const old = numb - 1;
      const t = Math.round((old - Math.floor(old)) * 24 * 60 * 60);
      const time = new Date(1900, 0, old, 0, 0, t);
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const date = time.getDate();
      console.log(time.getHours());
      console.log(time.getMinutes());
      return (
        year +
        format +
        (month < 10 ? "0" + month : month) +
        format +
        (date < 10 ? "0" + date : date)
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-div {
  width: 100%;
  height: 600px;
  background: cornflowerblue;
}
</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值