js：前端解析excel文件

1.首先要借助与xlsx这个解析excel文件的插件，引入方式如下：
外链：<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
vue引入：npm install xlsx -S,需在全局引入这个插件import XLSX from "xlsx";

2.通过获取本地excel文件来解析

解析代码如下：

    let teachBtn = document.querySelector('.teachLesson')
    teachBtn.addEventListener('change', (e) => {
        let fileName = e.target.files[0];
        let reader = new FileReader()
        //启动函数
        reader.readAsBinaryString(fileName)
        // //onload在文件被读取时自动触发
        reader.onload = function (e) {
            //     //workbook存放excel的所有基本信息
            let workbook = XLSX.read(e.target.result, { type: 'binary' })
            //     //定义sheetList中存放excel表格的sheet表，就是最下方的tab
            let sheetList = workbook.SheetNames
            //     //存放json数组格式的表格数据
            let resultJson = []
            //     //存放字符串数组格式的表格数据
            let resultArr = []
            let sheet2JSONOpts = {
                /** Default value for null/undefined values */
                defval: ''//给defval赋值为空的字符串
            }
            sheetList.forEach((y) => {
                let worksheet = workbook.Sheets[y]
                //多传一个sheet2JSONOpts参数是想为空的列表默认传参为''
                let excelData = XLSX.utils.sheet_to_json(workbook.Sheets[y], sheet2JSONOpts)    //每行以json数组形式输出
                let excelL = XLSX.utils.sheet_to_formulae(workbook.Sheets[y])   //生成一个excel的公式列表，可以获取到表格所有信息
                let arr = [];      //为了实现多表
                if (excelData.length != 0) {
                    let subArr=[];
                    let className='';
                    //遍历sheet表的数据
                    for (let item in excelData) {
                        console.log(item);
                        for (let l in excelData[0]) {
                           if (l=='__EMPTY'|| l.trim()=='') {
                               alert('科目名称不能为空');
                               return
                           }
                        }
                        //判断第一行是不是符合模板要求
                        if (excelData[0].班级 == undefined) {
                            alert(y+'表excel模板不正确')
                            teachBtn.value = '';       //清除文本框消息
                            return
                        } else {                    
                            //定义一个对象来接收其他行的参数，也是为了重新整合传参格式
                            for (let j in excelData[item]) {
                            console.log(excelData[item][j]);
                            if (excelData[item][j]=='') {
                                alert(y+'表第' + (Number(item) + 1) + '行有参数存在空值');
                                teachBtn.value = '';
                                return
                            }else{
                               if (j!='班级') {
                                   subArr.push(excelData[item][j])
                               }else{
                                className = excelData[item][j];
                               }
                            } 
                            }
                            //重新定义我们需要的数据字段值
                            let rowTable = {};
                            rowTable.teacherName = className;
                            rowTable.subjectNames =subArr.join(',');
                            arr.push(rowTable)
                        }
                    }
                    resultJson.push(arr)
                }

                resultArr.push(excelL)
            });
        };
    });

3.用于本地解析后却不能满足于需求，需要通过excel的服务器存放路径来解析文件，即通过url来解析excel文件
代码如下：
var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; // xhr.responseType = "json"; xhr.onload = e => { if (xhr.status == 200) { let obj = {}; let data = new Uint8Array(xhr.response); let workbook = XLSX.read(data, { type: "array" });
注：即通过请求url来转换我们解析excel需要的格式
4.期间查了些资料，这篇文章对我帮助挺大，后续也有这功能需要实现的小伙伴可以去看看这个文章；附注地址：https://www.cnblogs.com/liuxianan/p/js-excel.html