• JS_0053:JS 读取 excel 文件 转换成数组 模拟同步请求 延时等待


    1, js 读取表格数据 并转化为数组

    <script src="home/js/jquery.min.js"></script>
    <script src="home/js/xlsx.core.min.js"></script>
    /* 获取excel表格中的数据 */
    
    function sleep(ms) {
        return new Promise(function (resolve, reject) {
            setTimeout(resolve, ms);
        })
    };
    // 同步延时执行方法
    async function handle() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'source/hentai.xlsx', true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            if (xhr.status == 200) {
                var data = new Uint8Array(xhr.response)
                var workbook = XLSX.read(data, {
                    type: 'array'
                });
                mArr = workbook.Sheets[workbook.SheetNames[0]];
                // 设置当表格为空时的默认字符
                const sheet2JSONOpts = {
                        /** Default value for null/undefined values */
                        defval: ''//给defval赋值为空的字符串
                }
                mArr = XLSX.utils.sheet_to_json(mArr, sheet2JSONOpts);
            }
        };
        xhr.send();
        // 同步等待2秒后再执行下面的代码
        await sleep(2000);
        // 打印json格式的数据
        console.log(JSON.stringify(mArr));
    };
    handle();
    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <title>JS读取excel转换成数组</title>
        <meta name="description" content="使用sheetjs读取和导出excel示例">
        <style type="text/css">
            table {
                border-collapse: collapse;
            }
    
            th,
            td {
                border: solid 1px #6D6D6D;
                padding: 5px 10px;
            }
    
            .mt-sm {
                margin-top: 8px;
            }
    
            body {
                background: #f4f4f4;
                padding: 0;
                margin: 0;
            }
    
            .container {
                width: 1024px;
                margin: 0 auto;
                background: #fff;
                padding: 20px;
                min-height: 100vh;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
    
            <p>结果输出:(下面表格可直接编辑导出)</p>
            <div id="result" contenteditable></div>
    
        </div>
    
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/xlsx.core.min.js"></script>
    
        <script type="text/javascript">
    
            var mArr = '';
    
            // 从网络上读取某个excel文件,url必须同域,否则报错
            function readWorkbookFromRemoteFile(url, callback) {
                var xhr = new XMLHttpRequest();
                xhr.open('get', url, true);
                xhr.responseType = 'arraybuffer';
                xhr.onload = function (e) {
                    if (xhr.status == 200) {
                        var data = new Uint8Array(xhr.response)
                        var workbook = XLSX.read(data, {
                            type: 'array'
                        });
                        if (callback) callback(workbook);
    
                        // mArr = workbook.Sheets[workbook.SheetNames[0]];
                        // mArr = XLSX.utils.sheet_to_json(mArr);
                        // console.log(mArr);
                        // return mArr;
    
                    }
                };
                xhr.send();
    
    
            };
    
    
    
    
            function readWorkbook(workbook) {
                var sheetNames = workbook.SheetNames; // 工作表名称集合
                var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
                // var csv = XLSX.utils.sheet_to_csv(worksheet);
                var csv = XLSX.utils.sheet_to_json(worksheet);
                console.log(csv[0]['姓名']);
    
                // document.getElementById('result').innerHTML = csv2table(csv);
            }
    
            function loadRemoteFile(url) {
                readWorkbookFromRemoteFile(url, function (workbook) {
                    // console.log(workbook);
                    readWorkbook(workbook);
                });
            }
    
            $(function () {
    
                // loadRemoteFile('sample/test.xlsx');
    
                // var myaa = readWorkbookFromRemoteFile('sample/test.xlsx');
                // console.log(myaa);
    
    
    
    
    
                // var xhr = new XMLHttpRequest();
                //     xhr.open('get', 'sample/test.xlsx', true);
                //     xhr.responseType = 'arraybuffer';
                //     xhr.onload = function(e) {
                //         if (xhr.status == 200) {
                //             var data = new Uint8Array(xhr.response)
                //             var workbook = XLSX.read(data, {
                //                 type: 'array'
                //             });
    
                //             // if (callback) callback(workbook);
    
    
                //             mArr = workbook.Sheets[workbook.SheetNames[0]];
                //             mArr = XLSX.utils.sheet_to_json(mArr);
                //             console.log(mArr);
                //             // return mArr;
    
                //         }
                //     };
                //     xhr.send();
                //     console.log(mArr);
    
    
    
    
    
                // // 新建一个XMLHttpRequest实例对象
                // var xhr = new XMLHttpRequest();
    
                // // 指定通信过程中状态改变时的回调函数
                // xhr.onreadystatechange = function () {
                //     // 通信成功时,状态值为4
                //     if (xhr.readyState === 4) {
                //         if (xhr.status === 200) {
                //             // console.log(xhr.responseText);
    
                //             var data = new Uint8Array(xhr.response)
                //             var workbook = XLSX.read(data, {
                //                 type: 'array'
                //             });
                //             mArr = workbook.Sheets[workbook.SheetNames[0]];
                //             // console.log(mArr);
                //             mArr = XLSX.utils.sheet_to_json(mArr);
                //             console.log(mArr);
    
                //         } else {
                //             console.error(xhr.statusText);
                //         }
                //     }
                // };
    
    
                // xhr.onerror = function (e) {
                //     console.error(xhr.statusText);
                // };
    
                // // open方式用于指定HTTP动词、请求的网址、是否异步
                // xhr.open('GET', 'sample/test.xlsx', false);
                // // xhr.responseType = 'arraybuffer';
    
                // // 发送HTTP请求
                // xhr.send(null);
    
    
                // // function sleep(d){  
                // //     var t = Date.now();
                // //     while(Date.now() - t <= d);  
                // // }
                // // sleep(3000);
    
                // console.log("1111");
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                // var request = new XMLHttpRequest();
                // request.open('GET', 'sample/test.xlsx', false);
                // request.send(null);
                // // request.responseType = 'arraybuffer';
    
                // var data;
                // if (request.status === 200) {
                //     data = stringToArrayBuffer(request.response);
    
    
    
                //     // var data = new Uint8Array(data)
                //     var workbook = XLSX.read(data, {
                //         type: 'array'
                //     });
    
                //     console.log(workbook);
    
                //     // var mArr = workbook.Sheets[workbook.SheetNames[0]];
                //     // // // console.log(mArr);
                //     // var mArr = XLSX.utils.sheet_to_json(mArr);
                //     // console.log(mArr);
    
    
    
                //     // console.log(data);
    
                // } else {
                //     // alert('Something bad happen!\n(' + request.status + ') ' + request.statusText);
                // }
    
                // // ...
    
                // function stringToArrayBuffer(str) {
                //     var buf = new ArrayBuffer(str.length);
                //     var bufView = new Uint8Array(buf);
    
                //     for (var i=0, strLen=str.length; i<strLen; i++) {
                //         bufView[i] = str.charCodeAt(i);
                //     }
    
                //     return buf;
                // };
    
                // console.log('aaaaa');
    
    
    
    
    
    
    
    
    
                function sleep(ms) {
                    return new Promise(function(resolve, reject) {
                        setTimeout(resolve,ms);
                    })
                };
    
                var mArr;
                async function handle(){
                    var xhr = new XMLHttpRequest();
                    xhr.open('get', 'sample/test.xlsx', true);
                    xhr.responseType = 'arraybuffer';
                    xhr.onload = function(e) {
                        if (xhr.status == 200) {
                            var data = new Uint8Array(xhr.response)
                            var workbook = XLSX.read(data, {
                                type: 'array'
                            });
                            mArr = workbook.Sheets[workbook.SheetNames[0]];
                            mArr = XLSX.utils.sheet_to_json(mArr);
                        }
                    };
                    xhr.send();
                    
                    // 同步等待2秒后再执行下面的代码
                    await sleep(2000);
                    console.log(mArr);
    
                };
                handle();
    
    
            });
    
        </script>
    </body>
    
    </html>
  • 相关阅读:
    字符串-06. IP地址转换
    字符串-05. 字符串循环左移
    字符串-04. 字符串逆序
    BZOJ 3110
    UOJ 34 fft板子
    BZOJ 2716
    BZOJ 2243
    BZOJ 3697
    BZOJ 1176
    BZOJ 2599
  • 原文地址:https://www.cnblogs.com/eliteboy/p/16003005.html
Copyright © 2020-2023  润新知