前端解析excel转为数组——CV明

场景

适用于首行为表头的excel表(多行表头不适用),可将excel表中的数据,由前端传入后台进行操作,而无需后台读取excel表

案例

链接:https://pan.baidu.com/s/1_Yw–1-4yeliPJOtpg-pmQ
提取码:zc3u

代码详情

实现此功能需要xlsx.full.min.js,案例链接中附带,也可用以下链接
链接:https://pan.baidu.com/s/1c8NLEjYabTGf1I0nNa0Ctg
提取码:o6s0
附:

<!doctype html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
  <meta name="description" content="" />
  <meta name="Keywords" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>前端解析excel转为数组</title>
  <script type="text/javascript" src='./xlsx.full.min.js'></script>
</head>

<body>
  <div style="margin-bottom: 30px;">文件:
  <input type="file" id="file" onchange="getDateList()"></div>
  <textarea id='dataList' style="height: 600px;width: 1000px;"></textarea>
</body>
<script>
  //首先监听input框的变动,选中一个新的文件会触发change事件
  function getDateList() {
   //获取到选中的文件
    var empty = document.getElementById('file');
    var file = document.querySelector("#file").files[0];
    var type = file.name.split('.');
    if(type.length == 0 ){
      return 
    }
    if ( type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
      alert('只能选择excel文件导入');
      empty.outerHTML = empty.outerHTML//清空input
      return
    }
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (e) => {
      const data = e.target.result;
      const zzexcel = window.XLS.read(data, {
        type: 'binary'
      });
      const result = [];
      for (let i = 0; i < zzexcel.SheetNames.length; i++) {
        const newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
        result.push(...newData)
      }
      if(result == null || result.length == 0){
        alert('导入的excel表无数据')
        empty.outerHTML = empty.outerHTML;//清空input
        return
      }
      document.getElementById('dataList').value =  JSON.stringify(result)//将数组json对象转为json字符串
      empty.outerHTML = empty.outerHTML//清空input

    }
  }
</script>

</html>

你可能感兴趣的:(Excel,excel)