excel导入在管理系统中是必不可少的一项功能，它的实现对于新手来说也是比较复杂；
要想实现excel导入，就必须了解怎么读取excel文件
好了，话不多说，我们开始吧
这个导入功能，我使用了Jexcel.js插件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="jexce/dist/js/jquery.csv.min.js"></script>
<script type="text/javascript" src="js/plugins/layer/laydate/laydate.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script>
<script src="jexce/dist/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="jexce/dist/css/jquery.jexcel.css" type="text/css" />
<div class="dropdown col-sm-6">
<input type="file" id="excel-file" onchange="importf(this)"/>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">预览</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<label>请选择</label>
<select id="sel" name="">
</select>
</div>
<div class="modal-footer">
<button id="btnOk" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<div id="my"></div>
第一步：先使用xlsx.js读取excel文件
第二步：把获取的数据转成jexcel需要的数据格式
javascript代码
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importf(obj) {//导入
if(!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
var snames = wb.SheetNames;//获取所有的sheet表名
for(var i=0;i<snames.length;i++){
$("#sel").append('<option value="'+i+'">'+snames[i]+'</option>');
}
let excelData = [];
var seltext;
$("#btnOk").click(function(){
seltext=$('#sel option:selected').text();
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
excelData= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[seltext]) );
dataShow (excelData,seltext);
});
}
};
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
因为我们有时候导入的excel文件是的多个sheet表的，如果把他们都放到一个页面进行统一展示的话会比较乱，所以我做了一个下拉框，让客户自己预览那张表
var snames = wb.SheetNames;//获取所有的sheet表名
for(var i=0;i<snames.length;i++){
$("#sel").append('<option value="'+i+'">'+snames[i]+'</option>');
}
let excelData = [];
var seltext;
$("#btnOk").click(function(){
seltext=$('#sel option:selected').text();
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
excelData= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[seltext]) );
dataShow (excelData,seltext);
});
b2.PNG
下面的这段代码是我为了符合jexcel进行的一系列格式转化
function dataShow (persons,selname) {
console.log(persons);
var allRow=[],
allCol=[],
arr=[],
objData=eval(persons);
var num2;
for(var i=1,j=0;i<objData.length;i++,j++){
if(objData[i][selname]!=null){
if((objData[i][selname]).replace(/\s/ig,'')=="项目"){//去除所有空格，然后进行判断
arr[j] ={};
allCol.push(objData[i][selname]);
for(var key in objData[i]){
if(key!=selname){
arr[j]['text']=objData[i][key];
}
if(arr[j]['text']!=undefined){
allCol.push(arr[j]['text']);
}
}
num2=i;
}
}
if(i>=num2){
allRow[j]=[];
arr={}; //js中二维数组必须进行重复的声明，否则会undefind
allRow[j].push(objData[i][selname]);
for(var key in objData[i]){
if(key!=selname){
arr['text'+[j]]=objData[i][key];
}
if(arr['text'+[j]]!=undefined){
allRow[j].push(arr['text'+[j]]);
}
}
}
}
下面的代码就是jexcel.js使用了，想更多的了解jexcel.js
就找：https://bossanova.uk/jexcel
$('#my').jexcel({
data:allRow,
colHeaders:allCol,
csvHeaders :true ,
tableOverflow :true ,
tableHeight:'450px',
colWidths:colW(),
});
function colW(){
let col=[];
for(var m=0;m<allRow.length;m++){
col.push(60);
}
return col;
}