js读取excel的值

爱被打了一巴掌 2022-01-31 11:11 244阅读 0赞

# 简单的一个demo示例 #

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    
    </head>
    
    <body>
        <a class="ttt"> 12
        </a>
        
        <input type="file" class="tt" onchange="importf(this)" style="display:none;" />
    
        <div id="demo"></div>
        <script> </script>
        <script> document.querySelector('.ttt').addEventListener('click', function () { console.log(111) // 通过这种方式绑定点击事件可以有效的防止点击事件过多的时候相互影响 document.querySelector('.tt').click(); }) /* FileReader共有4种读取方法： 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 2.readAsBinaryString(file)：将文件读取为二进制字符串 3.readAsDataURL(file)：将文件读取为Data URL 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8' */ var wb; //读取完成的数据 var rABS = false; //是否将文件读取为二进制字符串 function importf(obj) { //导入 if (!obj.files) { return; } var f = obj.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; if (rABS) { wb = XLSX.read(btoa(fixdata(data)), { //手动转化 type: 'base64' }); } else { wb = XLSX.read(data, { type: 'binary' }); } // console.log(JSON.stringify(wb.Sheets[0])) //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 //wb.Sheets[Sheet名]获取第一个Sheet的数据 document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb .SheetNames[0]])); console.log(JSON.stringify(wb.Sheets[wb.SheetNames[0]])) }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } } function fixdata(data) { //文件流转BinaryString var o = "", l = 0, w = 10240; for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; } </script>
    </body>
    
    </html>

# 项目中的运用 #

### 项目中的html ###

项目中直接用onclick来绑定事件可能更简单，更不容易出错
    
    <script type="text/javascript" charset="utf-8" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    这是必须引用的
    
    	<div class="btnbox" style="display:flex;">
    		<a class="layout-btn default p-x-2x j-import-excel-btn" onclick="handleUpload()" style="border-radius: 0; background-color: #09bb07; cursor: pointer;"><i class="icon-add v-middle m-r-1x"></i>导入Excel
    		</a>
    		<input type="file" class="tt" onchange="importf(this)" style="display:none;" />
    		<a href="/ctrl/system/iframe?m=sample&c=sample" class="layout-btn default p-x-2x" style="border-radius: 0; margin-left: 20px;"><i class="icon-add v-middle m-r-1x"></i>添加</a>
    	</div>

### 项目中的js ###

//页面上的onclick事件
    function handleUpload() { 
        // console.log(1232)
       //通过点击事件直接触发input默认的click事件
        document.querySelector('.tt').click();
    
    }
    /* FileReader共有4种读取方法： 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 2.readAsBinaryString(file)：将文件读取为二进制字符串 3.readAsDataURL(file)：将文件读取为Data URL 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8' */
    var wb; //读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串
    
    function importf(obj) {  //导入
        if (!obj.files) { 
            return;
        }
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) { 
            var data = e.target.result;
            if (rABS) { 
                wb = XLSX.read(btoa(fixdata(data)), {  //手动转化
    
                    type: 'base64'
                });
            } else { 
                wb = XLSX.read(data, { 
                    type: 'binary'
                });
            }
            // console.log(JSON.stringify(wb.Sheets[0]))
    
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            // document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb
            // .SheetNames[0]]));
            // console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
            //这要注意最后得到的是字符串还是一个数组，如果是字符串的话需要稍微转换一下
            window.__importExcelData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            console.log(window.__importExcelData)
            modalId = modal.load();
            autoAddSample(window.__importExcelData, 1);
        };
        if (rABS) { 
            reader.readAsArrayBuffer(f);
        } else { 
            reader.readAsBinaryString(f);
        }
    }
    
    function fixdata(data) {  //文件流转BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w,
            l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }
    
    function autoAddSample(list, idx) { 
        if (idx > list.length - 1) { 
            modal.tips(('提交成功'))
            modal.close(modalId);
            window.location.reload();
    
            return
        }
    
        var item = { };
    
        for (var i in list[idx]) { 
        //因为得到的数据是excel中得到的，只有中文，所以需要通过这种方式得到每一条数据,直接循环渲染出来就可以
            if (i == '采样编号') { 
                item.no = list[idx][i]
            }
            if (i == '采样盒标题') { 
                item.title = list[idx][i]
            }
            if (i == '采样盒描述') { 
                item.desc = list[idx][i]
            }
            if (i == '类型') { 
                item.type = list[idx][i]
            }
        }
        // item.no = list[idx]['采样编号'];
        // item.title = list[idx]['采样盒标题'];
        // item.desc = list[idx]['采样盒描述'];
        // item.type = list[idx]['类型'];
    
        request(item, idx)
    
        function request(data_opt, idx) { 
            ajax.root({ 
                type: 'post',
                url: '/api?ctrl.sample.add',
                data: data_opt,
                complete: function (res) { 
                    if (res.state) { 
                        // modal.tips((res.data || '提交成功'), function () { 
                        // });
                        autoAddSample(list, ++idx)
                    } else { 
                        modal.tips(res.error || '请求失败，请重试');
                        modal.close(modalId);
                        window.location.reload();
                    }
                }
            });
        }
    
    }