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): 将第一行作为键读取并消除歧义

      核心代码:

      javascript 复制代码
      // 模板代码
      <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);
              }, 

结果

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

相关推荐
sunbyte19 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee10124 分钟前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树2 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin2 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑4 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598244 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag4 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长4 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   5 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术