vue+elementUI+XLSX.utils.sheet_to_json实现复杂表头的导入功能

导入表excel

问题

XLSX.utils.sheet_to_json方法不带参数的调用，无法解析我们的复杂表头的excel表格，因此，我们需要通过传参数，来指定表头的真实起始位置。

关键代码分析：XLSX.utils.sheet_to_json

XLSX.utils.sheet_to_json(data, type)有两个参数，第一个是我们wordBook对象里面Sheets对象对应的数据，第二个参数配置如下：

• raw: 使用原始值 (true) 或格式化字符串 (false) （默认值：true）
• dateNF: 在字符串输出中使用指定的日期格式（默认值：FMT 14）
• defval: 使用指定值代替 null 或 undefined （）
• blankrows: 在输出中包含空行**（默认值：** ）
• range:
  • (number)使用工作表范围，但将起始行设置为值
  • (String)使用指定范围（A1 样式的有界范围字符串
  • (default)使用工作表范围 ( worksheet['!ref'])
• header:

  • 1: 生成数组数组（"二维数组"）

  • "A".行对象键是文字列标签

  • array of strings: 使用指定的字符串作为行对象中的键

  • (default): 将第一行作为键读取并消除歧义

    核心代码：

    // 模板代码
    <el-upload
                action="/fileUploadApi"
                style="float:inline-end;margin-bottom: 5px;margin-right: 1%;"
                :on-change="readExcel"
                :auto-upload="false"
                :show-file-list="false"
                accept=".xlsx"
                ref="upload"
                :multiple="true"
                >
    <el-button type="primary" size="mini">导入文件</el-button>
    // 引用
    import FileSaver from "file-saver";
    import * as XLSX from "xlsx";
    
    // 读取解析表格数据
     readExcel(file, fileList) {
     			fileList
                if (!file) {
                    return false;
                } else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
                    this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
                    return false;
                }
                const fileReader = new FileReader();
                fileReader.onload = (ev) => {
                    try {
                        const data = ev.target.result;
                        const workbook = XLSX.read(data, {
                            type: "binary",
                        });
                        if (workbook.SheetNames.length >= 1) {
                            this.$message({
                            message: "导入数据表格成功",
                            showClose: true,
                            type: "success",
                            });
                        }
                        const wsname = workbook.SheetNames[0]; //取第一张表
                        console.log(workbook.Sheets[wsname])
                        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], {range:1,header:1,defval:''}); //生成json表格内容
                        console.log("生成json：", ws);
                    } catch (e) {
                        console.log(e);
                    return false;
                    }
                };
                // 如果为原生 input 则应是 files[0]
                fileReader.readAsBinaryString(file.raw);
            }, 

结果

通过生成如上的数组，我们再进行二次处理，即可渲染出我们想要的复杂表格。