造輪子:
簡樸運用js將excel導入到頁面。
首先將excel另存為csv花樣(不然要運用zipjs,才導入,而且只支撐xlsx,不支撐xls)
csv花樣剖析:
劃定規矩的如:
1,2,3
4,5,6
是否是覺得用英文逗號就能夠星散每一cell了?
年輕人,說了每個cell用英文逗號離隔,不代表每個cell里都是貞潔的啊!
假如這幾個:
每個cell,用英文逗號離隔,假如中心湧現雙字節字符或空格或英文逗號,cell會加上雙引號
1,,
4,5,6
1,"hello word",3,
4,5,6
1,",,,,,,",3,
4,5,6
剖析到這裏,就曉得沒有這麼簡樸。不過照樣有規律的。
1,能夠用正則先匹配出”,,,,,,”這類特殊情況
2,把雙引號中心的英文逗號用自定義的一個分隔符替代:<|>
",,,,,,"
"<|><|><|><|><|><|>"
3,處理完以後,再把<|>替代歸去,變成英文逗號。
4,固然這裏也會有點小bug,就是excel中假如自帶了<|>自定義的分隔符呢?我沒有好辦法,手動改分隔符唄。你有好要領告訴我哦!
下面就是帶有完全解釋的要領體了
<input type="file" multiple>
<script>
var input = document.querySelector('input');
input.addEventListener('change', function() {
//讀取文件列表
importExcel(this.files, function(data) {
console.log(data);
});
}, false);
var importExcel = function(files, back) {
//推斷參數範例,這裏還能夠推斷一下文件範例
if (!files instanceof FileList) {
return [];
}
var loadIndex = 0;
var textFiles = [];
[].slice.call(files).forEach(function(file) {
var reader = new FileReader();
reader.onload = function(e) {
//e.target.result就是全部excel的內容了
textFiles.push(readCell(e.target.result));
loadIndex++;
if (loadIndex == files.length) {
//讀取完一切文件后返回
back(textFiles);
}
};
//注重,這裏用了指定編碼來讀取文件文本內容
reader.readAsText(file, 'gbk');
});
function readCell(ex) {
// 去除前後空格
return ex.trim()
// 獵取數據行數
.split(/\n/gm).map(function(v) {
// 匹配出非純真英文字符串的內容str
var str = v.match(/"[^"]+"/ig);
if (str) {
// 將匹配到的str中的英文逗號轉換成<|>標記符
var result = str.map(function(vv) {
return vv.replace(/,/g, '<|>');
});
// 將原字符串v中的匹配到的str舉行替代
str.forEach(function(vv, i) {
v = v.replace(vv, result[i]);
});
}
// 按逗號截取每一列數據,趁便去除前後空字符
v = v.split(/\s*,\s*/g)
.map(function(v) {
// 去除雙引號
return v.replace(/"/g, '')
// 從新將標記符轉換到英文逗號
.replace(/<\|>/g, ',')
});
return v
});
}
}
</script>