最近做后台项目遇到需要解析用户上传的excel文件,并导出文件中的数据的需求;在做这个需求的过程中,才感觉到我大Javascript是无所不能的啊,能够通过二进制方式读取到excel文件中的内容,然后进一步读取并操控excel文件中的数据,并将数据以自己需要的格式导出来。
解析读取excel文件,有一个非常好用的插件,在这里强烈推荐给大家:
这个插件能够帮助你读取到excel文件中的数据并将数据以json的格式导出来,非常好用,非常方便。
以下是我在使用这个插件的过程中所做的demo:
var Excel = function () {
this.data = [] // EXCEL数据
this.checkResult = false // EXCEL规范检测结果
}
Excel.prototype.check = function (fileSelector,checkStr,url,suc) {
var self = this;
document.querySelector(fileSelector).addEventListener('change',function (e) {
var files = e.target.files;
var fileReader = new FileReader();
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
fileReader.onload = function(ev) {
try {
var result = ev.target.result,
workbook = XLSX.read(result, {type: "binary"}); // 以二进制流方式读取得到整份excel表格对象
} catch (e) {
console.error("文件类型不正确");
return;
}
var fromTo = ''; //要读取EXCEL的表格范围 A1:C4
var excelHeadStr = ''; //读取的EXCEL表头
var headCol = ''; //表头列号
var arr = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1']
var index ;
// 遍历workbook下的Sheets对象来读取每一个上传文件的内容
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]["!ref"]; // 获取EXCEl文件中存在数据的行号和列号
for(var j = 0 ; j < 3 ; j++ ){
excelHeadStr += workbook.Sheets[sheet][arr[j]].h + ','
}
// 去除字符串末尾','
excelHeadStr = excelHeadStr.substring(0, excelHeadStr.length - 1)
if( excelHeadStr === checkStr ){
self.checkResult = true
fileUpload(fileSelector,url,suc)
}else{
console.error('EXCEL不符合模版规范')
self.checkResult = false
}
self.data = self.data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
};
})
}
function fileUpload(fileSelector,url,suc) {
var file = document.querySelector(fileSelector).files[0],
formData = new FormData(),
reader = new FileReader();
// 判断上传文件类型
if (!/^.*?\.(xls|xlsx)$/i.test(file.name)){
console.error('所上传文件类型不符')
return false
}
formData.append('file',file)
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var data = JSON.parse(xhr.responseText);
var src = data.url;
suc(src);
}
}
xhr.onload = function (e) {
if (xhr.status === 200) {
console.log('uploaded');
} else {
console.log('file upload failed');
}
};
xhr.send(formData);
}
调用Excel构造方法进行解析:
var a = new Excel()
a.check('#excel-file','分类,产品名称,货号','http://11.com/resource/_upload',function (src) {
console.log(src)
console.log(a.data)
console.log(a.checkResult)
})
对内贵有志气,对外贵得人心