xlsx純前端導出表格，完善邊框等樣式

僅用xlsx是無法實現文字樣式及表格邊框的style的，因此配合使用xlsx-style

以下源碼直接復制過去用

// 源碼什么的都不需要改動
import * as XLSXStyle from 'xlsx-style';

export function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置項

    // 下載這里一定要用 xlsx-style 的write() 方法才可以使導出excel表格帶樣式
    var wbout = XLSXStyle.write(workbook, { type: 'buffer' });
    var blob = new Blob([wbout], {
        type: 'application/octet-stream',
    }); // 字符串轉ArrayBuffer

    return blob;
}

export function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 創建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent(
            'click',
            true,
            false,
            window,
            0,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
        );
    }
    aLink.dispatchEvent(event);
}

將此通用方法拷貝后，還需要數據為其提供參數

// 定義導出數據
      let listName = [
        ["資產出庫單"],
        [
          "編號:",
          val.No,
          null,
          "日期:",
          val.Time,
          null,
          "處理人:",
          val.UserName,
        ],
        ["備注:", val.remark],
        ["列表:"],
        [
          "序號",
          "編碼",
          "類別",
        ],
      ];
      let dataList = [];
　　　 //將動態內容遍歷，不懂請看另一篇,data即是動態數據
     data.map((item, index) => {
        dataList.push([
          index + 1 + "",
          item.id ? item.id : " ",
          item.type ? item.type : " ",
        ]);
      });
      let footer = [
        [],
        ["簽名:", null, null, null, null, "簽字時間:", null, null],
      ];
      // 初始化一個excel文檔，此時需要傳入數據
　　　 //aoa_to_sheet方法是將數組數據轉excel，json及其他方法可以去github查看 

      let ws = XLSX.utils.aoa_to_sheet([...listName, ...dataList, ...footer]);
      // console.log(ws)

　　　 // 如果需要修改的單元格較少，可以直接使用styleAll方式，按如下面的方式進行修改，這里的遍歷與循環是為了拼湊字符串，如'A1'
      // let styleAll = ["A1", "A2", "B2", "D2", "E2", "G2", "H2","A3","B3","A4",];
      ["A", "B", "C", "D", "E", "F", "G", "H"].map((item) => {
        for (let i = 1; i < 6 + dataList.length; i++) {
          let str = (item + i).toString();
          if (ws[str]) {
            if (i < 5 || i > dataList.length + 6) {
              ws[str].s = {
                font: {
                  name: "宋體",
                  sz: 12,
                  color: {
                    auto: 1,
                  },
                },
                alignment: {
                  /// 自動換行
                  wrapText: 1,
                  // 居中
                  horizontal: "center",
                  vertical: "center",
                  indent: 0,
                },
              };
            } else {
              ws[str].s = {
                font: {
                  name: "宋體",
                  sz: 12,
                  color: {
                    auto: 1,
                  },
                },
                border: {
                  color: {
                    auto: 1,
                  },
                  top: {
                    style: i === 5 ? "thin" : null,
                  },
                  bottom: {
                    style: i === 5 + dataList.length ? "thin" : null,
                  },
                  left: {
                    style: item === "A" ? "thin" : null,
                  },
                  right: {
                    style: item === "H" ? "thin" : null,
                  },
                },
                alignment: {
                  /// 自動換行
                  wrapText: 1,
                  // 居中
                  horizontal: "center",
                  vertical: "center",
                  indent: 0,
                },
              };
            }
          }
        }
      });
      ws["!merges"] = [
        {
          s: { c: 0, r: 0 },
          e: { c: 8, r: 0 },
        },
        {
          s: { c: 1, r: 1 },
          e: { c: 2, r: 1 },
        },
        {
          s: { c: 4, r: 1 },
          e: { c: 5, r: 1 },
        },
        {
          s: { c: 1, r: 2 },
          e: { c: 8, r: 2 },
        },
        {
          s: { c: 1, r: 3 },
          e: { c: 8, r: 3 },
        },
        {
          s: { c: 0, r: 5 + dataList.length },
          e: { c: 8, r: 5 + dataList.length },
        },
        {
          s: { c: 1, r: 6 + dataList.length },
          e: { c: 4, r: 6 + dataList.length },
        },
        {
          s: { c: 6, r: 6 + dataList.length },
          e: { c: 7, r: 6 + dataList.length },
        },
      ];
      ws["!rows"] = [
        {
          hpx: 30,
        },
        {
          hpx: 18,
        },
        {
          hpx: 30,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
        {
          hpx: 18,
        },
      ];
      ws["!cols"] = [
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
        {
          wpx: 80,
        },
      ];
      openDownloadDialog(sheet2blob(ws), "出庫導出.xlsx");

結合另一篇xlsx純導出進行了解，不需要單元格樣式修改的，使用另外一篇的方式即可