纯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 相关文章推荐
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python中的全局变量如何理解
2020/06/04 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
高三英语教学反思
2014/01/13 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
节水口号标语
2014/06/19 职场文书
地理科学专业自荐信
2014/09/01 职场文书
万里长城导游词
2015/01/30 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书