携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

本次博客又要用到前端对Excel的处理了 (使用sheetjs) ，先来回顾一下之前的文章：

juejin.cn/post/710892… 本篇知识其实更简单：使用前端代码生成需要格式的Excel文件==>导入满足条件的excel文件，前端解析出需要的字段

---

效果展示：

---

一、页面样式代码（可跳过）

 

 核心解释：

两个按钮 + 一个form表单

【下载申请信息模板】按钮 绑定downloadMode() 实现生成模板下载

【导入授权申请信息】按钮 使用el-upload 绑定getExcel 实现解析excel数据

二、引用sheetjs

（1）安装 npm install --save xlsx

npm install --save xlsx

（2）引入 import XLSX from "xlsx";

import XLSX from "xlsx";

三、代码生成excel

说明：转换sheet格式====== XLSX.utils.json_to_sheet(sheet1data);

创建一个新的空的workbook ===== XLSX.utils.book_new();

为每一个工作簿设置名称并添加到workbook（excel表）中 ===== XLSX.utils.book_append_sheet(wb, sheet1, "部门授权模板");

    downloadMode() {
      // 第一个sheet工作簿，如果需要创建多个，对应let多个sheetXdata即可
      let sheet1data = [ 
        {
          部门编码: "",
          版本号: "",
          涉密标识: "涉密/非密/无(填其一)",   // 对应sheet表格中的列
        },
      ];
      // let sheet2data = []; // 第二个sheet工作簿
      // 转换sheet格式
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data); 
      // var sheet2 = XLSX.utils.json_to_sheet(sheet2data); // 需要将每个sheet添加该步操作
      // 创建一个新的空的workbook      
      var wb = XLSX.utils.book_new();  
      // 为每一个工作簿设置名称并添加到workbook（excel表）中
      XLSX.utils.book_append_sheet(wb, sheet1, "部门授权模板");
      // XLSX.utils.book_append_sheet(wb, sheet2, "部门所属信息");
      const workbookBlob = workbook2blob(wb);  // 辅助函数workbook2blob
      // 下载文档并添加文件名称
      openDownloadDialog(workbookBlob, "部门授权模板.xls");  // 辅助函数openDownloadDialog
},

用到的辅助函数 workbook2blob   openDownloadDialog  可以放在通用文件中，每次使用时直接引用即可。

import { workbook2blob, openDownloadDialog, file2Xce } from "@/utils/exceldown";

至此，可以完成按照要求下载模板。关于字段等可以按照自己的需求修改。

四、上传excel解析字段

需求：需要解析出：【部门编码】【版本号】【涉密标识】这三个字段

文件后缀 ==== 取.之后

文件类型 ==== 遍历判断是否在满足的集合内

file2Xce(file).then((tabJson) 中 ==== tabJson就是解析出来的数据

getExcel(file) {
      const types = file.name.split(".")[1];  // 获取文件后缀类型
      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
        (item) => item === types
      );
      if (!fileType) {
        this.$message("格式错误！请重新选择");
        return;
      }
      file2Xce(file).then((tabJson) => {  // 辅助函数 file2Xce
        if (tabJson && tabJson.length > 0) {
          //成功解析出数据
          this.xlsxJson = tabJson;
          console.log("打印一 this.xlsxJson[0]", this.xlsxJson[0]);  // 整个文档数据
          console.log(
            "打印二 this.xlsxJson[0].sheet[0]",
            this.xlsxJson[0].sheet[0]
          );  // 获取第一个工作簿数据
          // 数据展示
          const data = this.xlsxJson[0].sheet[0];
          console.log("打印三 机器编码", data.机器编码);
          if (!data.部门编码) {
            this.$message.warning("未获取部门编码");
          }
          this.form = {
            hostCode: data.部门编码,
            version: data.版本号,
            smFlag:
              data.涉密标识 == "涉密"
                ? "1"
                : data.涉密标识 == "非密"
                ? "2"
                : "3",
          };
        }
        // 解析完成之后展示信息
        this.importApply();
        this.getNowTime();
      });
},
// 解析后展示form表单信息
importApply() {
      this.show = 1;
},

对应的打印效果如下：

 this.xlsxJson = tabJson;之后

this.xlsxJson[0] 表示第一个工作簿，当然，如果有多个工作簿，可以通过遍历获取每个工作簿的数据

this.xlsxJson[0].sheet[0] 表示第一个工作簿的第一行。当然，如果有多行数据，可以通过遍历获取每行数据

直接使用data.机器编码 可以获取到机器编码的具体值

再按照我们需要的效果拼接form表单展示即可。

1. （扩展）多个机器编码获取后去重

this.xlsxJson[0].sheet有多行

var code = [];
if (this.xlsxJson[0].sheet.length > 1) {
            this.xlsxJson[0].sheet.forEach((e) => {
              code.push(e.机器编码);
    });
}
// 数组去重
console.log("打印三 数组去重前", code.join(","));
code = this.arrLetout(code);  // 辅助函数数组去重
console.log("打印三 数组去重后", code);
 
// arrLetout(arr) {
//   let set = new Set(arr);
//   //通过Array.from()方法将 set 转化为数组 并赋给新数组
//   let newArr = Array.from(set);
//   return newArr;
// },

上传的表格数据如下：

 

 代码打印效果如下：  可以看到 this.xlsxJson[0].sheet 有三行数据，遍历即可获取每一行表格信息

---

附：三个辅助函数 blog.csdn.net/Sabrina_cc/…

至此，完成了两种形式的上传