jq excle 导入功能

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传文件</title>
   <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head>

<body>
  文件:<br>
  <input type="file" id="file"><br>
</body>
<script>
  //首先监听input框的变动,选中一个新的文件会触发change事件
  document.querySelector("#file").addEventListener("change", function () {
    try{ /*
      FileReader共有4种读取方法:
      1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
      2.readAsBinaryString(file):将文件读取为二进制字符串
      3.readAsDataURL(file):将文件读取为Data URL
      4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
      */
        //获取到选中的文件
      var file = document.querySelector("#file").files[0];
      var type = file.name.split('.');
      if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {  //导入判断
        alert('只能选择excel文件导入');
        return false;
      }
      var reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        var data = e.target.result;
        var zzexcel = window.XLS.read(data, {
          type: 'binary'
        });
        var result = [];   //存放导入的数组
        for (let i = 0; i < zzexcel.SheetNames.length; i++) {
          var newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
          result.push(newData); //循环整个excel 所以表
        }
        console.log('result', result)
      }
    }catch(err){
        console.log(err)
    }
  
  });
</script>

</html>

 

posted @ 2022-06-20 16:15  前端搬运工bug  阅读(265)  评论(0编辑  收藏  举报