• 首页
  • 归档
  • 闪存
  • 邻居
  • 关于
  • 现在
  • 搜索
  • 夜间模式
    ©2017-2025  懒猫爱伸腰 Theme by OneBlog
    搜索
    标签
    # 随笔 # 折腾 # 服务器 # raid # 总结 # 生活 # Windows 11 # 防火墙 # Windows # typecho
  • 首页>
  • 折腾>
  • 正文
  • JavaScript读取Excel表格中数据并输出到页面

    2021年08月03日 8.5 k 阅读 8 评论 2976 字

    仅作个人记录,请大佬移步!:&(蛆音娘_去世)

    第一步 所需文件:jquery-3.3.1.min.js,angular.min.js,xlsx.full.min.js

    第二步 把Excel中信息读取到workbook变量中,即提取信息

    var workbook = XLSX.read(fileData, { type: 'binary' });

    第三步 读取第一张表

    var sheet0 = workbook.Sheets[workbook.SheetNames[0]]; //sheet0代表excel表格中的第一页

    第四步 将提取的数据转换为json

    var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换

    此时str[0]已经表示表格第二行,第一行代表为每列数据的标题。通过str[0].column2 可调用第二行第三列的数据

    第五步 通过 for(var i in str)和第一行名称去获取具体某列数据

    测试图

    代码

    customjs.js

    (function () {
        var app = angular.module('myApp', []);
        app.controller('MyController', ['$scope', myController]);
        var excelJsonObj = [];
        function myController($scope) {
            $scope.uploadExcel = function () {
                var myFile = document.getElementById('file');
                var input = myFile;
                var reader = new FileReader();
                reader.onload = function () {
                    var fileData = reader.result;
                    var workbook = XLSX.read(fileData, { type: 'binary' });
                    // 表格的表格范围,可用于判断表头是否数量是否正确
                    var fromTo = '';
                    // 遍历每张表读取
                    var sheet0 = workbook.Sheets[workbook.SheetNames[0]];//sheet0代表excel表格中的第一页
                    var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换
                    for (var i in str) {
                        var cus = str[i].CustomerID;
                        var cas = str[i].CaseID;
                        $('#myTable tbody:last-child').append("<tr><td>" + cus + "</td><td>" + cas + "</td></tr>");
                    }                
                };
                reader.readAsBinaryString(input.files[0]);
            };
        }
    })();

    index.html

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Reading Excel</title>
        <meta name="viewport" content="width=device-width,initial-scale=10" />
        <script src="js/angular.min.js"></script>
        <script src="js/customjs.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/xlsx.full.min.js"></script>
        <style type="text/css">
            table, th, td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body ng-controller="MyController">
        <div>
            <form enctype="multipart/form-data">
                <input type="file" id="file" />
                <button type="submit" value="submit" ng-click="uploadExcel()">上传</button>
            </form>
        </div>
        <div>
            <table id="myTable">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CaseID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </body>
    </html>

    参考文章:http://blog.haoji.me/js-excel.html

    本文著作权归作者 [ 崚影 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    折腾JavaScripthtml
    取消回复

    发表留言
    回复

    读者留言8

    1. 鸟叔 Lv.1
      2022-05-09 08:08 回复

      鸟叔来贵博客参观学习,通过十年之约穿梭至此,期待回访!

    2. 流量卡 Lv.1
      2021-11-21 23:36 回复

      普通人用不到啊

    3. wu先生 Lv.2
      2021-09-05 12:21 回复

      不明觉历啊:&(蛆音娘_偷看)

    4. 肆猫 Lv.1
      2021-08-03 20:18 回复

      好

    5. 叁猫 博主
      2021-08-03 20:01 回复

      :&(蛆音娘_偷看)

      1. 叁猫 博主
        2021-09-05 12:26 回复
        @叁猫

        嘿嘿

      2. 马内 Lv.1
        2021-08-04 08:49 回复
        @叁猫

        JS读取Excel,平时用得比较少吧

        1. 叁猫 博主
          2021-09-14 09:11 回复
          @马内

          特殊需求 哈哈哈

    加载更多评论
    加载中...
    — 已加载全部评论 —
    首页归档闪存邻居关于现在
    Copyright©2017-2025  All Rights Reserved.  Load:0.028 s
    晋ICP备17001937号-4
    Theme by OneBlog V3.6.3
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。