• 前端常用的【文件下载操作3】【sheetJS XLSX】前端代码生成excel下载到本地 ==＞ 本地导入固定格式的excel后前端解析出需要的字段

    要相信，所有的不美好都是为了迎接美好，所有的困难都会为努力让道。

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

    前端常用的【文件下载操作1】前端配合后端进行文件下载==＞根据url下载 ==＞根据blob下载_小白Rachel的博客-CSDN博客_vue下载后端文件

    【Vue项目实践】实现在线预览word文件、excel文件_小白Rachel的博客-CSDN博客_vue word预览

    前端常用的【文件下载操作2】不获取后端文件流 【纯前端】实现：el-table表格下载为Excel文件【sheetJS XLSX】_小白Rachel的博客-CSDN博客

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

    效果展示：

      

    目录

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

    二、引用sheetjs

    三、代码生成excel

    四、上传excel解析字段

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

    附：3个辅助函数

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

    1. <div class="divContent">
    2.         <el-row style="display: flex">
    3.           <el-button
    4.             class="importBtn importBtn2"
    5.             plain
    6.             @click="downloadMode()"
    7.             style="margin-right: 10px"
    8.             >下载申请信息模板
    9.           >
    10.           <el-upload
    11.             class="upload-demo"
    12.             action="/"
    13.             :on-change="getExcel"
    14.             :auto-upload="false"
    15.             :show-file-list="false"
    16.             style="width: 140px"
    17.           >
    18.             <el-button class="importBtn" plain>导入授权申请信息el-button>
    19.           el-upload>
    20.         el-row>
    21.         <el-form
    22.           :model="form"
    23.           ref="form"
    24.           :inline="true"
    25.           v-if="show > 0"
    26.           :rules="rules"
    27.         >
    28.           <el-row>
    29.             <el-col>
    30.               <el-form-item label="主机编码" prop="hostCode">
    31.                 <el-input
    32.                   v-model="form.hostCode"
    33.                   placeholder="请输入主机编码"
    34.                   clearable
    35.                   size="small"
    36.                   style="width: 810px"
    37.                 />
    38.               el-form-item>
    39.             el-col>
    40.           el-row>
    41.           <el-row>
    42.             <el-col :span="6"
    43.               ><el-form-item label="授权点数" prop="points">
    44.                 <el-input
    45.                   v-model="form.points"
    46.                   placeholder="请输入授权点数"
    47.                   clearable
    48.                   size="small"
    49.                   style="width: 180px"
    50.                   disabled
    51.                 /> 
    52.             >el-col>
    53.             <el-col :span="6"
    54.               ><el-form-item label="版本号" prop="version">
    55.                 <el-input
    56.                   v-model="form.version"
    57.                   placeholder="请输入版本号"
    58.                   clearable
    59.                   size="small"
    60.                   style="width: 180px"
    61.                 /> 
    62.             >el-col>
    63.           el-row>
    64.           <el-row>
    65.             <el-col :span="6"
    66.               ><el-form-item label="授权时间" prop="startTime">
    67.                 <el-date-picker
    68.                   v-model="form.startTime"
    69.                   value-format="yyyy-MM-dd"
    70.                   type="date"
    71.                   placeholder="选择授权时间"
    72.                   style="width: 180px"
    73.                   :picker-options="pickerOptions"
    74.                 >
    75.                 el-date-picker> 
    76.             >el-col>
    77.             <el-col :span="6">
    78.               <el-form-item label="涉密标识" prop="smFlag">
    79.                 <el-select
    80.                   v-model="form.smFlag"
    81.                   placeholder="请选择"
    82.                   style="width: 180px"
    83.                   size="small"
    84.                 >
    85.                   <el-option
    86.                     v-for="item in smFlagOptions"
    87.                     :key="item.value"
    88.                     :label="item.label"
    89.                     :value="item.value"
    90.                   >
    91.                   el-option>
    92.                 el-select>
    93.               el-form-item>
    94.             el-col>
    95.           el-row>
    96.         el-form>
    97.       div>

     

     核心解释：

    两个按钮 + 一个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

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

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

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

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

    四、上传excel解析字段

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

    1. // 解析excel
    2. getExcel(file) {
    3.       const types = file.name.split(".")[1];  // 获取文件后缀类型
    4.       const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
    5.         (item) => item === types
    6.       );
    7.       if (!fileType) {
    8.         this.$message("格式错误！请重新选择");
    9.         return;
    10.       }
    11.       file2Xce(file).then((tabJson) => {  // 辅助函数 file2Xce
    12.         if (tabJson && tabJson.length > 0) {
    13.           //成功解析出数据
    14.           this.xlsxJson = tabJson;
    15.           console.log("打印一 this.xlsxJson[0]", this.xlsxJson[0]);  // 整个文档数据
    16.           console.log(
    17.             "打印二 this.xlsxJson[0].sheet[0]",
    18.             this.xlsxJson[0].sheet[0]
    19.           );  // 获取第一个工作簿数据
    20.           // 数据展示
    21.           const data = this.xlsxJson[0].sheet[0];
    22.           console.log("打印三 机器编码", data.机器编码);
    23.           if (!data.部门编码) {
    24.             this.$message.warning("未获取部门编码");
    25.           }
    26.           this.form = {
    27.             hostCode: data.部门编码,
    28.             version: data.版本号,
    29.             smFlag:
    30.               data.涉密标识 == "涉密"
    31.                 ? "1"
    32.                 : data.涉密标识 == "非密"
    33.                 ? "2"
    34.                 : "3",
    35.           };
    36.         }
    37.         // 解析完成之后展示信息
    38.         this.importApply();
    39.         this.getNowTime();
    40.       });
    41. },
    42. // 解析后展示form表单信息
    43. importApply() {
    44.       this.show = 1;
    45. },

    对应的打印效果如下：

     this.xlsxJson = tabJson;之后

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

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

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

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

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

    this.xlsxJson[0].sheet有多行

    1. // 判断是否有多个机器编码
    2. var code = [];
    3. if (this.xlsxJson[0].sheet.length > 1) {
    4.             this.xlsxJson[0].sheet.forEach((e) => {
    5.               code.push(e.机器编码);
    6.     });
    7. }
    8. // 数组去重
    9. console.log("打印三 数组去重前", code.join(","));
    10. code = this.arrLetout(code);  // 辅助函数数组去重
    11. console.log("打印三 数组去重后", code);
    12.  
    13. // arrLetout(arr) {
    14. //   let set = new Set(arr);
    15. //   //通过Array.from()方法将 set 转化为数组 并赋给新数组
    16. //   let newArr = Array.from(set);
    17. //   return newArr;
    18. // },

    上传的表格数据如下：

     

     代码打印效果如下：

     可以看到 this.xlsxJson[0].sheet  有三行数据，遍历即可获取每一行表格信息

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

     

     附：3个辅助函数

    1. // exceldown.js
    2. import XLSX from "xlsx";
    3. // 生成excel的配置
    4. export function workbook2blob(workbook) {
    5.   // 生成excel的配置项
    6.   var wopts = {
    7.     // 要生成的文件类型
    8.     bookType: "xlsx",
    9.     // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    10.     bookSST: false,
    11.     type: "binary"
    12.   };
    13.   var wbout = XLSX.write(workbook, wopts);
    14.   // 将字符串转ArrayBuffer
    15.   function s2ab(s) {
    16.     var buf = new ArrayBuffer(s.length);
    17.     var view = new Uint8Array(buf);
    18.     for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    19.     return buf;
    20.   }
    21.   let buf = s2ab(wbout);
    22.   var blob = new Blob([buf], {
    23.     type: "application/octet-stream"
    24.   });
    25.   return blob;
    26. }
    27.  
    28. // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
    29. export function openDownloadDialog(blob, fileName) {
    30.   if (typeof blob === "object" && blob instanceof Blob) {
    31.     blob = URL.createObjectURL(blob); // 创建blob地址
    32.   }
    33.   var aLink = document.createElement("a");
    34.   aLink.href = blob;
    35.   // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
    36.   aLink.download = fileName || "";
    37.   var event;
    38.   if (window.MouseEvent) event = new MouseEvent("click");
    39.   //   移动端
    40.   else {
    41.     event = document.createEvent("MouseEvents");
    42.     event.initMouseEvent(
    43.       "click",
    44.       true,
    45.       false,
    46.       window,
    47.       0,
    48.       0,
    49.       0,
    50.       0,
    51.       0,
    52.       false,
    53.       false,
    54.       false,
    55.       false,
    56.       0,
    57.       null
    58.     );
    59.   }
    60.   aLink.dispatchEvent(event);
    61. }
    62.  
    63. //解析excel
    64. export function file2Xce(file) {
    65.   return new Promise(function(resolve, reject) {
    66.     const reader = new FileReader();
    67.     reader.onload = function(e) {
    68.       const data = e.target.result;
    69.       this.wb = XLSX.read(data, {
    70.         type: "binary"
    71.       });
    72.       const result = [];
    73.       this.wb.SheetNames.forEach(sheetName => {
    74.         console.log(sheetName);
    75.         result.push({
    76.           sheetName: sheetName,
    77.           sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
    78.         });
    79.       });
    80.       resolve(result);
    81.     };
    82.     reader.readAsBinaryString(file.raw);
    83.     // reader.readAsBinaryString(file) // 传统input方法
    84.   });
    85. }

  • 相关阅读:
    Linux--信号
    Go RabbitMQ简介 使用
    java基础学习：java中的反射
    【算法作业】实验三：划分集合-贪心 & 可能的IP地址-回溯
    【Spring IOC容器加载过程】
    【Linux升级之路】6_进程间通信
    情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript
    字符串笔记-字符串哈希
    【WebRTC】QoS 拥塞控制 GCC 理论 Sender Side BWE 或 REMB
    ElasticSearch虚拟机安装（单机版）
  • 原文地址：https://blog.csdn.net/Sabrina_cc/article/details/126163449