使用js实现excel文件的上传及渲染到前端页面为table

使用js实现excel文件的上传及渲染到前端页面为table:

导入表格：

执行结果：

代码展示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file01">
    <!-- 2.上传文件按钮 -->
    <button id="btnUpload">上传文件</button>    
    <div class="progress" style="width: 500px;margin: 15px 10px;">
        <!--bootstrap进度条-->
        <!-- <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div> -->                    
        <table id="demo01"></table>        
    </div>

    <img src="./img/loading.gif" style="display: none;" alt="" id="loading">
    <!-- 3.img标签，来选择上传文件后的图片 -->
    <img src="" alt="" id="img" width="800">

    <script>
        $('#btnUpload').on('click', function () {
            var files = $('#file01')[0].files[0];//文件对象
            // console.log(files);
            var file_name = files['name'];//文件名称                        
            var index = file_name.lastIndexOf(".");
            if (index != -1) {
                file_format = file_name.substr(index + 1).toUpperCase();//文件格式后缀
                if (file_format != 'XLS' && file_format != 'XLSX') {
                    alert("只能上传.xls和.xlsx类型的文件!");
                } else {
                    //读取文件内容
                    var reader = new FileReader();
                    reader.readAsBinaryString(files);
                    reader.onload = function (e) {
                        var data = e.target.result;
                        var wb = XLSX.read(data, {
                            type: 'binary' // 以二进制流方式读取获得整份excel表格对象
                        });
                        var sheet_names = wb.SheetNames;//获取excel中所有表名称
                        // console.log(sheet_name);
                        var sheet1_name = sheet_names[0];//获取excel中第一张表名称
                        var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第一张表数据，数组类型，每一行数据都是一个对象
                        // console.log(sheet01_obj);
                        // console.log(sheet01_obj.length);
                        var table1 = "";
                        var table2 = "";                        

                        var keyArr = [];
                        table1 += "<tr>";
                        for (var key01 in sheet01_obj[0]) {
                            keyArr.push(key01);
                            table1 += '<th nowrap>' + key01 + '</th>';//表头                            
                            // console.log(table1);

                        };
                        table2 += "</tr>";
                        // console.log(table1);

                        for (var i = 0; i < sheet01_obj.length; i++) {
                            table2 += "<tr>";
                            for (var j in sheet01_obj[i]) {
                                // console.log('value:'+j);
                                table2 += '<td nowrap>' + sheet01_obj[i][j] + '</td>';//表数据

                            };
                            table2 += "</tr>";

                        }
                        console.log(table1 + table2);
                        document.getElementById("demo01").innerHTML = table1 + table2;

                    }

                }

            }


        });





    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file01">
    <!-- 2.上传文件按钮 -->
    <button id="btnUpload">上传文件</button>
    <!--bootstrap进度条-->
    <div class="progress" style="width: 500px;margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%

        </div>
        <table id="demo01">

        </table>
    </div>

    <img src="./img/loading.gif" style="display: none;" alt="" id="loading">
    <!-- 3.img标签，来选择上传文件后的图片 -->
    <img src="" alt="" id="img" width="800">

    <script>
        $('#btnUpload').on('click', function () {
            var files = $('#file01')[0].files[0];//文件对象
            // console.log(files);
            var file_name = files['name'];//文件名称                        
            var index = file_name.lastIndexOf(".");
            if (index != -1) {
                file_format = file_name.substr(index + 1).toUpperCase();//文件格式后缀
                if (file_format != 'XLS' && file_format != 'XLSX') {
                    alert("只能上传.xls和.xlsx类型的文件!");
                } else {
                    //读取文件内容
                    var reader = new FileReader();
                    reader.readAsBinaryString(files);
                    reader.onload = function (e) {
                        var data = e.target.result;
                        var wb = XLSX.read(data, {
                            type: 'binary' // 以二进制流方式读取获得整份excel表格对象
                        });
                        var sheet_names = wb.SheetNames;//获取excel中所有表名称
                        // console.log(sheet_name);
                        var sheet1_name = sheet_names[0];//获取excel中第一张表名称
                        var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第一张表数据，数组类型，每一行数据都是一个对象
                        // console.log(sheet01_obj);
                        // console.log(sheet01_obj.length);
                        var table1 = "";
                        var table2 = "";
                        var table3 = "";

                        var keyArr = [];
                        table1 += "<tr>";
                        for (var key01 in sheet01_obj[0]) {
                            keyArr.push(key01);
                            table1 += '<th nowrap>' + key01 + '</th>';//表头
                            // var table="<tr><th>Artist</th><th>Title</th></tr>";
                            // console.log(table1);

                        };
                        table2 += "</tr>";
                        // console.log(table1);

                        for (var i = 0; i < sheet01_obj.length; i++) {
                            table2 += "<tr>";
                            for (var j in sheet01_obj[i]) {
                                // console.log('value:'+j);
                                table2 += '<td nowrap>' + sheet01_obj[i][j] + '</td>';//表数据

                            };
                            table2 += "</tr>";

                        }
                        console.log(table1 + table2);
                        document.getElementById("demo01").innerHTML = table1 + table2;

                    }

                }

            }


        });





    </script>
</body>

</html>

posted @ 2021-09-17 17:15 Doraaaaaaaaaa 阅读(2105) 评论(1) 收藏举报

刷新页面返回顶部

Doraaaaaaaaaa

使用js实现excel文件的上传及渲染到前端页面为table

公告