<link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

 npm i -S exceljs file-saver luckyexcel

import { excelOptions } from "@/common/common.js"
const ExcelJS = require("exceljs");
import FileSaver from "file-saver";
import LuckyExcel from 'luckyexcel';
import XLSX from 'xlsx'

	<div class="allbtn">
      <button class="btn" @click="saveExcel">保存</button>
      <button class="btn" @click="outputExcel">導(dǎo)出表格</button>
      <input type="file" accept=".xlsx" @change="importExcel($event)" value="導(dǎo)入表格" />
    </div>
	<h2>當(dāng)前表格名稱</h2>
    <input class="inp" type="text" v-model="excelTitel">
    <div id="luckysheet"></div>

// 導(dǎo)入表格
    importExcel (event) {
      let file = event.target.files[0]
      let that = this;
      const types = file.name.split(".")[1];
      // 判斷類型
      const fileType = ["xlsx"].some(
        item => item === types
      );
      console.log(file)
      if (!fileType) {
        alert("只支持上傳xlsx后綴的表格!")
        return
      }
      LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
        if (exportJson.sheets === null || exportJson.sheets.length === 0) {
          this.$message.error('無(wú)法讀取excel文件的內(nèi)容，當(dāng)前不支持xls文件！')
          return
        }
        window.luckysheet.destroy()
        this.changeExcelOption.data = exportJson.sheets
        window.luckysheet.create(this.changeExcelOption)
      })
    },

// 初始化加載
    init () {
      let opt = excelOptions();
      // 檢測(cè)本地庫(kù)中是否有配置
      let excelValue = window.localStorage.getItem("excelValue");
      if (excelValue != null) {//有值
        let checkExcelValue = JSON.parse(excelValue)
        opt.data[0] = checkExcelValue;
      }
      this.changeExcelOption = opt;
      luckysheet.create(opt)
      // 保存初始表格名稱
      this.excelTitel = this.changeExcelOption.title;
    },

// 保存excel數(shù)據(jù)
    saveExcel () {
      var objsheet = luckysheet.getAllSheets() // 得到表的數(shù)據(jù)
      // options = objsheet // 將表的數(shù)據(jù)保存本地
      // console.log(objsheet)

      // 獲取標(biāo)內(nèi)容更新變化
      luckysheet.setWorkbookName(this.excelTitel)
      this.changeExcelOption.title = this.excelTitel;
    },

 // 導(dǎo)出表格
    outputExcel () {
      this.exportExcel(luckysheet.getluckysheetfile("修改"));
    },
    async exportExcel (luckysheet) {
      // 參數(shù)為luckysheet.getluckysheetfile()獲取的對(duì)象
      // 1.創(chuàng)建工作簿，可以為工作簿添加屬性
      const workbook = new ExcelJS.Workbook();
      // 2.創(chuàng)建表格，第二個(gè)參數(shù)可以配置創(chuàng)建什么樣的工作表
      luckysheet.every((table) => {
        if (table.data.length === 0) return true;
        const worksheet = workbook.addWorksheet(table.name);
        // 3.設(shè)置單元格合并,設(shè)置單元格邊框,設(shè)置單元格樣式,設(shè)置值
        this.setStyleAndValue(table.data, worksheet);
        this.setMerge(table.config.merge, worksheet);
        this.setBorder(table.config.borderInfo, worksheet);
        return true;
      });
      // 4.寫入 buffer
      const buffer = await workbook.xlsx.writeBuffer();
      //調(diào)用文件保存插件
      FileSaver.saveAs(
        new Blob([buffer], { type: "application/octet-stream" }),
        this.changeExcelOption.title + ".xlsx"
      );
      return buffer;
    },

    setMerge (luckyMerge = {}, worksheet) {
      const mergearr = Object.values(luckyMerge);
      mergearr.forEach((elem) => {
        // elem格式：{r: 0, c: 0, rs: 1, cs: 2}
        // 按開始行，開始列，結(jié)束行，結(jié)束列合并（相當(dāng)于 K10:M12）
        worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs);
      });
    },

    setBorder (luckyBorderInfo, worksheet) {
      if (!Array.isArray(luckyBorderInfo)) return;
      luckyBorderInfo.forEach(function (elem) {
        var val = elem.value;
        let border = {};
        const luckyToExcel = {
          type: {
            "border-all": "all",
            "border-top": "top",
            "border-right": "right",
            "border-bottom": "bottom",
            "border-left": "left",
          },
          style: {
            0: "none",
            1: "thin",
            2: "hair",
            3: "dotted",
            4: "dashDot", // 'Dashed',
            5: "dashDot",
            6: "dashDotDot",
            7: "double",
            8: "medium",
            9: "mediumDashed",
            10: "mediumDashDot",
            11: "mediumDashDotDot",
            12: "slantDashDot",
            13: "thick",
          },
        };

        if (val) {
          if (val.t != undefined) {
            border["top"] = {
              style: luckyToExcel.style[val.t.style],
              color: val.t.color,
            };
          }
          if (val.r != undefined) {
            border["right"] = {
              style: luckyToExcel.style[val.r.style],
              color: val.r.color,
            };
          }
          if (val.b != undefined) {
            border["bottom"] = {
              style: luckyToExcel.style[val.b.style],
              color: val.b.color,
            };
          }
          if (val.l != undefined) {
            border["left"] = {
              style: luckyToExcel.style[val.l.style],
              color: val.l.color,
            };
          }
          worksheet.getCell(val.row_index + 1, val.col_index + 1).border = border;
        }
      });
    },
    setStyleAndValue (cellArr, worksheet) {
      if (!Array.isArray(cellArr)) return;
      cellArr.forEach((row, rowid) => {
        row.every((cell, columnid) => {
          if (!cell) return true;
          let fill = this.fillConvert(cell.bg);
          let font = this.fontConvert(
            cell.ff,
            cell.fc,
            cell.bl,
            cell.it,
            cell.fs,
            cell.cl,
            cell.ul
          );
          let alignment = this.alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr);
          let value;
          if (cell.f) {
            value = { formula: cell.f, result: cell.v };
          } else {
            value = cell.v;
          }
          let target = worksheet.getCell(rowid + 1, columnid + 1);
          target.fill = fill;
          target.font = font;
          target.alignment = alignment;
          target.value = value;
          return true;
        });
      });
    },

    fillConvert (bg) {
      if (!bg) {
        return {
          type: "pattern",
          pattern: "solid",
          fgColor: { argb: "#ffffff".replace("#", "") },
        };
      }
      let fill = {
        type: "pattern",
        pattern: "solid",
        fgColor: { argb: this.colorHex(bg).replace("#", "") },
      };
      console.log(fill);
      return fill;
    },
    //將rgb()轉(zhuǎn)成16進(jìn)制
    colorHex (color) {
      // RGB顏色值的正則
      var reg = /^(rgb|RGB)/;
      if (reg.test(color)) {
        var strHex = "#";
        // 把RGB的3個(gè)數(shù)值變成數(shù)組
        var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
        // 轉(zhuǎn)成16進(jìn)制
        for (var i = 0; i < colorArr.length; i++) {
          var hex = Number(colorArr[i]).toString(16);
          if (hex === "0") {
            hex += hex;
          }
          strHex += hex;
        }
        return strHex;
      } else {
        return String(color);
      }
    },
    fontConvert (ff = 0, fc = "#000000", bl = 0, it = 0, fs = 10, cl = 0, ul = 0) {
      // luckysheet：ff(樣式), fc(顏色), bl(粗體), it(斜體), fs(大小), cl(刪除線), ul(下劃線)
      const luckyToExcel = {
        0: "微軟雅黑",
        1: "宋體（Song）",
        2: "黑體（ST Heiti）",
        3: "楷體（ST Kaiti）",
        4: "仿宋（ST FangSong）",
        5: "新宋體（ST Song）",
        6: "華文新魏",
        7: "華文行楷",
        8: "華文隸書",
        9: "Arial",
        10: "Times New Roman ",
        11: "Tahoma ",
        12: "Verdana",
        num2bl: function (num) {
          return num === 0 ? false : true;
        },
      };

      let font = {
        name: luckyToExcel[ff],
        family: 1,
        size: fs,
        color: { argb: fc.replace("#", "") },
        bold: luckyToExcel.num2bl(bl),
        italic: luckyToExcel.num2bl(it),
        underline: luckyToExcel.num2bl(ul),
        strike: luckyToExcel.num2bl(cl),
      };

      return font;
    },

    alignmentConvert (vt = "default", ht = "default", tb = "default", tr = "default") {
      // luckysheet:vt(垂直), ht(水平), tb(換行), tr(旋轉(zhuǎn))
      const luckyToExcel = {
        vertical: {
          0: "middle",
          1: "top",
          2: "bottom",
          default: "top",
        },
        horizontal: {
          0: "center",
          1: "left",
          2: "right",
          default: "left",
        },
        wrapText: {
          0: false,
          1: false,
          2: true,
          default: false,
        },
        textRotation: {
          0: 0,
          1: 45,
          2: -45,
          3: "vertical",
          4: 90,
          5: -90,
          default: 0,
        },
      };

      let alignment = {
        vertical: luckyToExcel.vertical[vt],
        horizontal: luckyToExcel.horizontal[ht],
        wrapText: luckyToExcel.wrapText[tb],
        textRotation: luckyToExcel.textRotation[tr],
      };
      return alignment;
    },

    borderConvert (borderType, style = 1, color = "#000") {
      // 對(duì)應(yīng)luckysheet的config中borderinfo的的參數(shù)
      if (!borderType) {
        return {};
      }
      const luckyToExcel = {
        type: {
          "border-all": "all",
          "border-top": "top",
          "border-right": "right",
          "border-bottom": "bottom",
          "border-left": "left",
        },
        style: {
          0: "none",
          1: "thin",
          2: "hair",
          3: "dotted",
          4: "dashDot", // 'Dashed',
          5: "dashDot",
          6: "dashDotDot",
          7: "double",
          8: "medium",
          9: "mediumDashed",
          10: "mediumDashDot",
          11: "mediumDashDotDot",
          12: "slantDashDot",
          13: "thick",
        },
      };
      let template = {
        style: luckyToExcel.style[style],
        color: { argb: color.replace("#", "") },
      };
      let border = {};
      if (luckyToExcel.type[borderType] === "all") {
        border["top"] = template;
        border["right"] = template;
        border["bottom"] = template;
        border["left"] = template;
      } else {
        border[luckyToExcel.type[borderType]] = template;
      }
      return border;
    }