3

造轮子:
简单使用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>

jsoncode
4k 声望786 粉丝

I'm jsoncode