vue xlsx.js获取单元格数据类型的hooks 单元格类型处理

xlsx的单元格修改,获取当前单元格的数据类型

xlsx.js的单元格修改,获取当前单元格的数据类型

找遍全网没有找到xlsx.js,本地文件读取时获取当前单元格的类型,对特殊类型单元格进行修改的格式化的方法,因为我们需求是一个没有固定模板的Excel文件要对时间进行处理,其余保留原始值;

代码内容

1.先拿到文件对象,用FileReader方法获取到文件的对象

const fileRead = (files) => {
  return new Promise((resolve) => {
    // eslint-disable-next-line new-cap
    const filer = new FileReader();
    filer.readAsBinaryString(files);
    filer.onload = (ev) => {
      resolve(ev);
    };
  });
};

2.写一个获取文件内的内容和头部的一个公用方法

export const excelToArray = async (file) => {
  const cont = await fileRead(file);
  // 返回promise的文件处理函数返回二进制数据
  const data = cont.target.result;
  const workbook = XLSX.read(data, {
    // 将二进制数据放入得到excel数据
    type: "binary",
    cellDates: true //规定时间进行处理成日常的时间格式
  });
  const wsname = workbook.SheetNames[0]; // 取第一张表
  const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
  console.log('格式化后', ws);
  // 获取表头2-1
  const a = workbook.Sheets[workbook.SheetNames[0]];
  console.log('未进行格式化', a);

  const contents = getRow(a) // 获取内容的方法![在这里插入图片描述](https://img-blog.csdnimg.cn/68977dc495244775bbd8aaaefe7ce608.png#pic_center)

  const headers = getHeaderRow(a); // 获取头部的方法
  return {
    headers: headers,
    ws: ws,
    contents
  };
};

直接用XLSX.utils.sheet_to_json() 方法无法满足需求
在这里插入图片描述
3.自己写了一个方法获取到了文件的,单元格格式后进行处理

const getRow = (sheet) => {
  const contents = [];
  /* sheet['!ref']表示所有单元格的范围,例如从A1到F8则记录为 A1:F8*/
  // c 表示列,r表示行,从0开始的
  const range = XLSX.utils.decode_range(sheet["!ref"]);
  // console.log('range', XLSX.utils.decode_range);
  let C,
    R = range.s.r; /* 从第一行开始 */
  /* 按列进行数据遍历 */
  let i = 0;
  for (let mr = range.s.r + 1; mr <= range.e.r; ++mr) {
    // 便利行来查找
    contents[mr - 1] = {}
    for (C = range.s.c; C <= range.e.c; ++C) {
      let obj = {}
      /*固定 查找第一行中的单元格 */
      const cell = sheet[XLSX.utils.encode_cell({
        c: C,
        r: R
      })];
      const name = XLSX.utils.format_cell(cell) // 键名
      /* 查找对应行内的单元格内容 */
      const cellCur = sheet[XLSX.utils.encode_cell({
        c: C,
        r: mr
      })];
      if (!cellCur) {

        contents[mr - 1][name] = {
          value: '',
          type: ''
        }
      } else {
        const nameCur = XLSX.utils.format_cell(cellCur) // 键名

        contents[mr - 1][name] = {
          value: cellCur.v || '',
          type: cellCur.t || ''
        }
      }




    }


  }


  return contents;
};

处理完成后的数据

通过hooks解构拿到contens

表头的处理方法

/**
 * 将File文件通过xlsx读取表头为数组
 * @param file
 * @return {list}
 */
export const getHeaderRow = (sheet) => {
  const headers = [];
  /* sheet['!ref']表示所有单元格的范围,例如从A1到F8则记录为 A1:F8*/
  const range = XLSX.utils.decode_range(sheet["!ref"]);
  let C,
    R = range.s.r; /* 从第一行开始 */
  /* 按列进行数据遍历 */
  let i = 0;
  for (C = range.s.c; C <= range.e.c; ++C) {
    /* 查找第一行中的单元格 */
    const cell = sheet[XLSX.utils.encode_cell({
      c: C,
      r: R
    })];
    let hdr = "UNKNOWN " + C; // <-- 进行默认值设置
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
    if (hdr.indexOf("UNKNOWN") > -1) {
      if (!i) {
        hdr = "__EMPTY";
      } else {
        hdr = "__EMPTY_" + i;
      }
      i++;
    }
    headers.push(hdr);
  }
  return headers;
};
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值