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

最新推荐文章于 2023-06-28 17:46:39 发布

CV明

最新推荐文章于 2023-06-28 17:46:39 发布

阅读量512

点赞数

分类专栏： Excel 文章标签： excel

本文链接：https://blog.csdn.net/weixin_43743676/article/details/109676080

版权

前端开发 Excel xlsx库数据解析文件上传

关键词由CSDN通过智能技术生成

Excel 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

场景

适用于首行为表头的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>

CV明

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端解析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&g
复制链接

扫一扫

专栏目录