DDR爱好者之家 Design By 杰米
本文实例讲述了纯JS实现的读取excel文件内容功能。分享给大家供大家参考,具体如下:
template.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS-XLSX Live Demo</title> <link href="../css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <style> #drop{ border:2px dashed #bbb; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:25px; text-align:center; font:20pt bold,"Vollkorn";color:#bbb } #b64data{ width:100%; } a { text-decoration: none } button{} </style> </head> <body> <pre> <input type="file" name="xlfile" id="xlf"> <button type="button" class="btn btn-danger"><a href="Techrecord.html" rel="external nofollow" rel="external nofollow" >返回</a></button> <input type="checkbox" name="useworker" checked="" style="display: none;"> <input type="checkbox" name="xferable" checked="" style="display: none;"> <input type="checkbox" name="userabs" checked="" style="display: none;"> </pre> <button class="submit_all">提交</button> <pre id="out"></pre> <br> <script src="/UploadFiles/2021-04-02/jquery.js">myexcel.js
/*jshint browser:true */ /*global XLSX */ var X = XLSX; var XW = { /* worker message */ msg: 'xlsx', /* worker scripts */ rABS: '../js/xlsxworker2.js', norABS: '../js/xlsxworker1.js', noxfer: '../js/xlsxworker.js' }; function ab2str(data) { var o = "", l = 0, w = 10240; for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint16Array(data.slice(l*w,l*w+w))); o+=String.fromCharCode.apply(null, new Uint16Array(data.slice(l*w))); return o; } function s2ab(s) { var b = new ArrayBuffer(s.length*2), v = new Uint16Array(b); for (var i=0; i != s.length; ++i) v[i] = s.charCodeAt(i); return [v, b]; } function xw_xfer(data, cb) { var worker = new Worker(rABS "\\n").replace(/\r/g,"\\r");cb(JSON.parse(xx)); break; } }; if(rABS) { var val = s2ab(data); worker.postMessage(val[1], [val[1]]); } else { worker.postMessage(data, [data]); } } function xw(data, cb) { transferable = document.getElementsByName("xferable")[0].checked; if(transferable) xw_xfer(data, cb); else xw_noxfer(data, cb); } function get_radio_value( radioName ) { var radios = document.getElementsByName( radioName ); for( var i = 0; i < radios.length; i++ ) { if( radios[i].checked || radios.length === 1 ) { return radios[i].value; } } } function to_json(workbook) { var result = {}; workbook.SheetNames.forEach(function(sheetName) { var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); if(roa.length > 0){ result[sheetName] = roa; } }); return result; } var tarea = document.getElementById('b64data'); function b64it() { if(typeof console !== 'undefined') console.log("onload", new Date()); var wb = X.read(tarea.value, {type: 'base64',WTF:wtf_mode}); process_wb(wb); } var token=Cookies.get("token"); console.log(token); if(token==null){ // alert("你是怎么进来的?请先登录"); // window.location.href="../login.html" rel="external nofollow" ; } var global_wb; function process_wb(wb) { global_wb = wb; var output = ""; //这里是成绩批量录入代码,可以忽略不计 $(".submit_all").on("click",function(){ var array=Object.values(to_json(wb))[0]; var len=array.length; var array1="",array2="",array3="",array4="",array5=""; for(var i=0;i<len;i++){ array1+=array[i].学号+","; array2+=array[i].成绩+","; array3+=array[i].总分+","; array4+=array[i].时间+","; array5+=array[i].评语+","; } array1=array1.substring(0,array1.length-1); array2=array2.substring(0,array2.length-1); array3=array3.substring(0,array3.length-1); array4=array4.substring(0,array4.length-1); array5=array5.substring(0,array5.length-1); console.log(array1); var url='grade/addall'; var params={ "token":token, "gradeUserId":array1, "gradeCourse":array2, "gradeRank":array3, "gradeRemark":array5, "gradeTime":array4 }; pullData(url,params,function(res){ if(res.state==0){ alert("成绩录入成功!"); window.location.href="Techrecord.html" rel="external nofollow" rel="external nofollow" ; } else if(res.state==1){ alert("您输入的学号不存在"); } }); }) output = JSON.stringify(to_json(wb), 2, 2); if(out.innerText === undefined) out.textContent = output; else out.innerText = output; if(typeof console !== 'undefined') console.log(output); } function setfmt() {if(global_wb) process_wb(global_wb);} var xlf = document.getElementById('xlf'); function handleFile(e) { rABS = document.getElementsByName("userabs")[0].checked; use_worker = document.getElementsByName("useworker")[0].checked; var files = e.target.files; var f = files[0]; { var reader = new FileReader(); var name = f.name; reader.onload = function(e) { if(typeof console !== 'undefined') var data = e.target.result; if(use_worker) { xw(data, process_wb); } else { var wb; if(rABS) { wb = X.read(data, {type: 'binary'}); } else { var arr = fixdata(data); wb = X.read(btoa(arr), {type: 'base64'}); } process_wb(wb); } }; if(rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f); } } if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);导入一个新建的excel
查看读取到的值,以json格式显示
给大家一个GitHub插件包下载地址: https://github.com/SheetJS/js-xlsx
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript文件与目录操作技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- 《消逝的光芒2》1.16版本更新汇总
- 刘德丽《赤的疑惑HQCD》头版限量编号MQA[低速原抓WAV+CUE]
- 冯满天《弦歌满天·山上》阮月原创作品集[低速原抓WAV+CUE]
- 老虎鱼《EvenSantaGetsTheBlues圣诞老人也蓝调》iso
- 艾什莉体模COS《原神》角色:猫娘绮良良
- 《星刃》全球过审未删减 网友调侃日本审核制度
- PS官方分享《星刃》女主水下效果:动作流畅表情僵硬
- 群星《乘风踏浪 电视剧专辑》[FLAC/f分轨][110.36MB]
- 胡彦斌《音乐密码》[WAV分轨][379M]
- 林志炫《追寻伦敦星空下》[WAV分轨][564M]
- 萧亚轩.2004-首选萧亚轩美丽的插曲2CD【维京】【WAV+CUE】
- 容祖儿.2001-2008-喜欢祖儿系列8CD【英皇娱乐】【WAV+CUE】
- 伊扬.1994-亲爱的你会想我吗?【太平洋影音】【WAV+CUE】
- 李健.2003-似水流年【泰达】【WAV+CUE】
- 崔苔菁.1969-天涯何处是芳草(LP版)【银河唱片】【WAV+CUE】