纯JS实现的读取excel文件内容功能示例【支持所有浏览器】


Posted in Javascript onJune 23, 2018

本文实例讲述了纯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="../js/jquery.js"></script>
<script src="../js/common.js"></script>//这里主要封装了一下方法,可以忽略,主要使用到以下几个js
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="../js/shim.js"></script>
<script src="../js/xlsx.full.min.js"></script>
<script src='../js/myexcel.js'></script>
</body>
</html>

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 ? XW.rABS : XW.norABS);
 worker.onmessage = function(e) {
  switch(e.data.t) {
   case 'ready': break;
   case 'e': console.error(e.data.d); break;
   default: xx=ab2str(e.data).replace(/\n/g,"\\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

纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

查看读取到的值,以json格式显示

纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

给大家一个GitHub插件包下载地址: https://github.com/SheetJS/js-xlsx

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js如何获取object类型里的键值
Feb 18 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
js 颜色选择插件
Jan 23 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 #Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 #Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 #Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
ant design实现圈选功能
2019/12/17 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python生成ppt的方法
2018/06/07 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python for循环及基础用法详解
2019/11/08 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
高中生自我评语大全
2014/01/19 职场文书
高三学生评语大全
2014/04/25 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
课外活动总结
2015/02/04 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js