造轮子:
简单使用js将excel导入到页面。this
首先将excel另存为csv格式(不然要使用zipjs,才能导入,而且只支持xlsx,不支持xls)编码
csv格式分析:
规则的如:excel
1,2,3 4,5,6
是否是感受用英文逗号就能够分离每一cell了?
年轻人,说了每个cell用英文逗号隔开,不表明每个cell里都是纯洁的啊!
若是这几个:
每个cell,用英文逗号隔开,若是中间出现双字节字符或空格或英文逗号,cell会加上双引号code
1,, 4,5,6
1,"hello word",3, 4,5,6
1,",,,,,,",3, 4,5,6
分析到这里,就知道没有这么简单。不过仍是有规律的。ip
1,能够用正则先匹配出",,,,,,"这种特殊状况
2,把双引号中间的英文逗号用自定义的一个分隔符替换:<|>字符串
",,,,,," "<|><|><|><|><|><|>"
3,处理完以后,再把<|>替换回去,变成英文逗号。
4,固然这里也会有点小bug,就是excel中若是自带了<|>自定义的分隔符呢?我没有好办法,手动改分隔符呗。你有好方法告诉我哦!get
下面就是带有完整注释的方法体了input
<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>