vue实现excel文件的导入和读取

1.效果展示

上传数据前

 上传数据后

或者

 

2.下载

npm install [email protected]

如果一直报关于xlsx的read的错误，这里是因为xlsx的0.18.0版本已经没有read属性了，所以最好是使用0.18.0版本以下的xlsx。

3.js文件

excel.js

import { stringify } from "json5";

// 按照二进制读取文件
export function readFile(file) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (e) => {
      resolve(e.target.result);
    };
  });
}

// 字段对应表
export let character = {
  staffName: {
    text: "员工姓名",
    type: "string",
  },
  sex: {
    text: "性别",
    type: "string",
  },
  idNumber: {
    text: "身份证号",
    type: "string",
  },
  staffEmail: {
    text: "员工邮箱",
    type: "string",
  },
  phone: {
    text: "电话号码",
    type: "string",
  },
  jobPreference: {
    text: "工作偏好",
    type: "string",
  },
  timePreference: {
    text: "时间偏好",
    type: "string",
  },
  datePreference: {
    text: "时间段偏好",
    type: "string",
  }
};

// 时间字符串格式化
export function formatTime(str, tpl) {
  let arr = str.match(/\d+/g).map((item) => {
    return item.length < 2 ? "0" + item : item;
  });
  tpl = tpl || "{0}年{1}月{2}日 {3}时{4}分{5}秒";
  return tpl.replace(/\{(\d+)\}/g, (_, group) => {
    return arr[group] || "00";
  });
}

utils.js 实现加载

// 设置异步延迟间隔
export function delay(interval = 0) {
    return new Promise((resolve) => {
      let timer = setTimeout((_) => {
        clearTimeout(timer);                                                                                                          
        resolve();
      }, interval);
    });
  }

4 .界面处理