前端下载excel模板（包含样式）

使用 xlsx 插件  npm install xlsx --save

使用 xlsx-style 插件  npm install xlsx-style --save

import XLSX from "xlsx";

import XLSXStyle from "xlsx-style";

methods：{

downloadTemplate() {

let data = [

        [

          "备注信息1",

          "备注信息2",

          "备注信息3",

          "备注信息4",  

        ],

        [

          "自定义录入，不超500字符",

          "自定义录入，不超500字符",

          "自定义录入，不超500字符",

          "自定义录入，不超500字符",

        ],

        [],

        [],

        [

          "略",

          "略",

          "略",

          "略"

        ]

      ];

      let titles = ["模板下载"];

      var sheet = XLSX.utils.json_to_sheet(data, {

        skipHeader: true

      });

      /**设置标题头背景色 */

      for (const key in sheet) {

        // 第一行，表头

        if (key.replace(/[^0-9]/gi, "") === "1") {

          sheet[key].s = {

            fill: {

              //背景色

              fgColor: { rgb: "aacf8d" }

            },

            alignment: {

              horizontal: "center",

              wrapText: true,

              vertical: "center"

            }

          };

        } else if (

          key.replace(/[^0-9]/gi, "") === "2" ||

          key.replace(/[^0-9]/gi, "") === "5"

        ) {

          sheet[key].s = {

            alignment: {

              horizontal: "center",

              wrapText: true,

              vertical: "center"

            }

          };

        }

        sheet["!cols"] = [

          { wpx: 150 },

          { wpx: 150 },

          { wpx: 150 },

          { wpx: 150 }

        ];

        //  合并单元格（第二行到第四行）

        sheet["!merges"] = [

          { s: { r: 1, c: 0 }, e: { r: 3, c: 0 } },

          { s: { r: 1, c: 1 }, e: { r: 3, c: 1 } },

          { s: { r: 1, c: 2 }, e: { r: 3, c: 2 } },

          { s: { r: 1, c: 3 }, e: { r: 3, c: 3 } }

        ];

      }

      this.openDownload(

        this.sheet2blob(sheet, titles.join("-")),

        titles.join("-") + ".xlsx"

      );

    },

    sheet2blob(sheet, sheetName) {

      let wb = XLSX.utils.book_new();

      wb.SheetNames.push(sheetName);

      wb.Sheets[sheetName] = sheet;

      var wbout = XLSXStyle.write(wb, {

        bookType: "",

        bookSST: false,

        type: "binary"

      });

      var blob = new Blob([s2ab(wbout)], { type: "" }, sheetName);

      // 字符串转ArrayBuffer

      function s2ab(s) {

        var buf = new ArrayBuffer(s.length);

        var view = new Uint8Array(buf);

        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;

        return buf;

      }

      return blob;

    },

    openDownload(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);

    }

}