纯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 flash激活
Oct 19 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery的文档处理程序详解
May 10 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
关于vue中如何监听数组变化
Apr 28 Vue.js
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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php数组随机排序实现方法
2015/06/13 PHP
详解php中的implements 使用
2017/06/13 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python中的默认参数实例分析
2018/01/29 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python实现自动整理文件的脚本
2020/12/17 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
成人教育自我鉴定
2013/11/01 职场文书
年终总结会主持词
2014/03/25 职场文书
委托书样本
2014/04/02 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
绿色环保演讲稿
2014/05/10 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
病假证明模板
2015/06/19 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP