vue或js解析文件excel表格js通过插件解析表格读取文件

浅浅的花香味﹌ 2022-05-10 14:08 226阅读 0赞

安装插件

cnpm i xlsx --save-dev
    cnpm i jquery --save-dev

引入插件

![70][]

html引入文件

dom加载完成解析文件

mounted() {
                $('#excel-file').change(function(e) {
                    var files = e.target.files;
    
                    var fileReader = new FileReader();
                    fileReader.onload = function(ev) {
                        console.log(ev,'ev')
                        try {
                            var data = ev.target.result,
                                    workbook = XLSX.read(data, {
                                        type: 'binary'
                                    }), // 以二进制流方式读取得到整份excel表格对象
                                    persons = []; // 存储获取到的数据
                        } catch (e) {
                            console.log('文件类型不正确');
                            return;
                        }
    
                        // 表格的表格范围，可用于判断表头是否数量是否正确
                        var fromTo = '';
                        // 遍历每张表读取
                        for (var sheet in workbook.Sheets) {
                            if (workbook.Sheets.hasOwnProperty(sheet)) {
                                fromTo = workbook.Sheets[sheet]['!ref'];
                                console.log(fromTo);
                                persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                                // break; // 如果只取第一张表，就取消注释这行
                            }
                        }
    
                        console.log(persons);
                    };
    
                    // 以二进制方式打开文件
                    fileReader.readAsBinaryString(files[0]);
                });
            }

得到解析结果

![70 1][]

![70 2][]

[70]: /images/20220505/1c822127cbdb48eca76a3f0cd73a8cee.png
[70 1]: /images/20220505/4c87ed61c69f48b588de894f63d81592.png
[70 2]: /images/20220505/ded1dca78de2419080acfe8c2164556b.png