纯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 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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在线打包程序源码
2008/07/27 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP curl使用实例
2015/07/02 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python多线程http压力测试脚本
2019/06/25 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
大学生演讲稿范文
2014/01/11 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
稽核岗位职责范本
2015/04/13 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python字符串格式化方式
2022/04/07 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL