纯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 相关文章推荐
javascript数组的使用
Mar 28 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
angular动态表单制作
Feb 23 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
详解用async/await来处理异步
Aug 28 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python实现人民币大写转换
2018/06/20 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python三引号如何输入
2020/07/06 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
土木建筑学生自我评价
2014/01/14 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
政审证明范文
2015/06/19 职场文书
中学教师读书笔记
2015/07/01 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技