版权声明:本文为博主原创,转载请注明出处。 https://blog.csdn.net/u011848397/article/details/52423870
【GitHub】:https://github.com/SheetJS/js-xlsx
【中文API】:http://www.uedsc.com/js-xlsx-api.html
项目中需要用到导入excel文件的功能,在此记录一下使用心得。
从gibhub上下载插件,打开index,查看javascript代码。
这里只研究了”选择文件“的调用过程,即在每个方法的开头”alert(方法名)“,就可以看出调用顺序
我们将Use Web Workers、Use Transferrables、Use readAsBinaryString三个勾选视为123,
下图记录了123不同勾选情况时,选择文件后,内部会调用哪些方法
这里可以看出,当23同时勾选时,优先判定3为true;只勾选2时,内部调用的方法比3要多一个fixdata()。
实际上,ie浏览器是不支持第3个选项的。
1勾选时,总是无法显示内容,没仔细研究具体原因。我们可以很容易发现,1的调用步骤和23是有明显区别的,当不需要1时,我们可以去掉很多不必要的方法,且原index的js代码中:
var XW = {
/* worker message */
msg: 'xlsx',
/* worker scripts */
rABS: './xlsxworker2.js',
norABS: './xlsxworker1.js',
noxfer: './xlsxworker.js'
};
也是跟1选项有关,若果不需要可以去掉。
下面贴出我的html代码:
<html lang="zh-CN">
<head>
<title>测试</title>
<link href="<%=basePath%>/resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>/resources/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<%-- <link href="<%=basePath%>/resources/css/login.css" 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%;
}
</style>
</head>
<body>
<p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
Use Transferrables: (when available) <input type="checkbox" name="xferable" checked><br />
Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" checked><br />
<pre id="content"></pre>
<p id="content2"></p>
<script src="<%=basePath%>/resources/js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>/resources/js/jquery.cookie.js"></script>
<script src="<%=basePath%>/resources/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="<%=basePath%>/resources/plugins/xslx/dist/xlsx.core.min.js"></script>
<script>
//ie不支持rABS
var rABS = typeof FileReader !== "undefined" && typeof FileReader.prototype !== "undefined" && typeof FileReader.prototype.readAsBinaryString !== "undefined";
if(!rABS) {
document.getElementsByName("userabs")[0].disabled = true;
document.getElementsByName("userabs")[0].checked = false;
}
var transferable = typeof Worker !== 'undefined';
if(!transferable) {
document.getElementsByName("xferable")[0].disabled = true;
document.getElementsByName("xferable")[0].checked = false;
}
function fixdata(data) {
alert("fixdata");
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
return o;
}
function get_radio_value( radioName ) {
alert("get_radio_value");
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) {
alert("to_json");
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
return result;
}
function process_wb(wb) {
alert("process_wb");
var output = JSON.stringify(to_json(wb), 2, 2);//去掉后2个参数,显示结果只有1行,没有缩进
if(content.innerText === undefined) out.textContent = output;
else content.innerText = output;
$("#content2").text(output)
}
var xlf = document.getElementById('xlf');
function handleFile(e) {
alert("handleFile");
rABS = document.getElementsByName("userabs")[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') console.log("onload", new Date(), rABS);
var data = e.target.result;
var wb;
if(rABS) {
wb = XLSX.read(data, {type: 'binary'});
} else {
var arr = fixdata(data);
wb = XLSX.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);
</script>
</body>
</html>