导入excel

原创已于 2023-04-21 11:21:10 修改 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#excel #javascript #开发语言

于 2023-04-21 09:46:17 首次发布

JS 专栏收录该内容

21 篇文章

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="file" id="file" onchange="getFile()" style="display: none;" accept=".xls,.xlsx" />
  <button id="btn">获取本地excel数据</button>

  <div style="width: 100%;text-align: center;margin-top: 10px;" id="tableContainer">
  </div>

  <script type="text/javascript" src="./js/xlsx.core.min.js"></script>
  <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript">

    $(function () {
      $("#btn").click(() => {
        //手动触发上传组件
        $("#file").trigger("click");
      })
    })

    //读取本地文件
    function readWorkbookFromLocalFile(file, callback) {


      var reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = function (e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {
          type: 'binary'
        });
        if (callback) {
          callback(workbook);
        }
      };


    }

    function getFile() {
      // let files = $('#file').prop('files');
      let files = document.getElementById('file')['files']
      if (files) {
        readWorkbookFromLocalFile(files[0], (workbook) => {
          const wsname = workbook.SheetNames[0]
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
          console.log(ws)
        })
      }
    }

    function aa(data) {

      console.log(data.length)

    }


    //将sheets转换为表格
    function createTables(sheets) {
      let div = $("<div></div>")
      //遍历每一张sheet表格
      for (let i in sheets) {
        //转换HTML是一个数组对象，分为三部分:meta,title,table
        let table = $(XLSX.utils.sheet_to_html(sheets[i]))[2];
        console.log(table)
        let $table = $(table)
        $table.attr("width", "80%")
        $table.attr("border", "1")
        $table.attr("align", "center")
        $table.css({
          "margin": "5%"
        })
        $("#tableContainer").append($table)
      }
    }


  </script>
</body>

</html>