• ExcelJS 导入导出excel带下拉框筛选数据


    import ExcelJS from "exceljs";

    配上文档地址

    下载方法

    //数据格式
    deviceJson:{
            't(数据类型)':[{value:0,label:'浮点'},{value:1,label:'整型'},{value:2,label:'布尔'},{value:3,label:'字符串'}],
            'o(读写方向)':[{value:0,label:'只读'},{value:1,label:'只写'},{value:2,label:'读写'}],
            'oc_sav(断线缓存)':[{value:0,label:'否'},{value:1,label:'是'}],
          }
    let columnsFormulae = {
                'o(读写方向)':['只读','只写','读写'],
              }

    const ExcelJSWb = new ExcelJS.Workbook();//创建实例
              const Sheet1 = ExcelJSWb.addWorksheet("Sheet1");//工作簿名称
              let columns = []//表头集合
              let columnsFormulae = []//下拉框数据集合
              //tagList  导出数据集合  
              //deviceJson  下拉框数据匹配集合 
              let keys = Object.keys(tagList[0])
              for (const key in tagList[0]) {
                if (Object.hasOwnProperty.call(tagList[0], key)) {
                  const element = tagList[0][key];
                  columns.push({
                    header:key,
                    key:key,
                    width: 10,
                    index:keys.indexOf(key)//记录表头下标 下拉数据使用
                  })
                  this.deviceJson[key] ? columnsFormulae[key] = this.deviceJson[key].map((item)=> item.label) : null
                }
              }
              Sheet1.columns = columns//导出表 赋值表头
              Sheet1.addRows(tagList);// 添加导出表体
              tagList.forEach((tag, idx) => {// 遍历表体 赋值 下拉框数据
                const row = idx + 2;
                columns.map((colu,num)=>{
                  if (columnsFormulae.hasOwnProperty(colu.key)){
                    let str = `"`+columnsFormulae[colu.key].join()+`"`
                    Sheet1.getCell(row, num+1).dataValidation = {
                      type: "list",
                      formulae: [str]
                    };
                  }
                })
              });
    writeBuffer 把写好的excel 转换成 ArrayBuffer 类型
              const buffer = await ExcelJSWb.xlsx.writeBuffer();
              _this.saveAs(
                new Blob([buffer], {
                  type: "application/octet-stream",
                }),
                "deviceTag" +
                  "." +
                  (wopts.bookType == "biff2" ? "xls" : wopts.bookType)
              );

    saveAs(obj, fileName) {
          //当然可以自定义简单的下载文件实现方式
          let tmpa = document.createElement("a");
          tmpa.download = fileName || "下载";
          tmpa.href = URL.createObjectURL(obj); //绑定a标签
          tmpa.click(); //模拟点击实现下载
          setTimeout(function () {
            //延时释放
            URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
          }, 100);
        }

    导入方法如下 input  change事件

    importF(evt) {
          let _this = this;
          let rABS = false;
          let obj = evt.target;
          let arr = evt.target.files[0].name.split(".");
          let len = evt.target.files[0].name.split(".").length;
          let typeName = arr[len - 1];
          if (typeName != "xlsx") {
            this.$message({
              type: "warning",
              message: "请上传.xlsx类型文件",
            });
            return;
          }
          if (!obj.files) {
            return;
          }
          let f = obj.files[0];
          let reader = new FileReader();
          reader.onload = function (e) {
            let data = e.target.result;
            let wb;
            if (rABS) {
              wb = XLSX.read(data, { type: "binary" });
            } else {
              let arr = _this.fixdata(data);
              wb = XLSX.read(btoa(arr), { type: "base64" });
            }
               //deviceTagList  导入数据集合
            let deviceTagList = XLSX.utils.sheet_to_json(
              wb.Sheets[wb.SheetNames[0]]
            );
    if (rABS) reader.readAsBinaryString(f);
     else reader.readAsArrayBuffer(f);
    },

  • 相关阅读:
    Hadoop3:客户端向HDFS写数据流的流程讲解(较枯燥)
    DDD战略设计--如何设计聚合(含示例代码)
    API对接是什么意思,技术分享
    python二维码识别系统的设计与实现
    设计模式 — — 工厂模式
    V8是如何执行JavaScript代码的?
    汽车票订票系统
    【PHP】如何搭建PHP本地运行学习环境2022版
    重启redis的步骤
    利用XXXXXXXXMIND管理。
  • 原文地址:https://blog.csdn.net/qq_37818095/article/details/126398813