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

网络 2018-08-21 1763

本文实例讲述了纯JS实现的读取excel文件内容功能。分享给大家供大家参考，具体如下：

template.html

<html>

<head>

<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>

</pre>

<br>

</body>

</html>

myexcel.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

/*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

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

分享到：

[返回顶部] [关闭窗口]

上一篇：JS实现关键词高亮显示正则匹配

下一篇：JS实现获取word文档内容并输出显示到html页面示例

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

热门文章

随机文章