js-xlsx 導出Excel表格，樣式設置

　　剛剛找到了一個前端導出列表比較不錯的插件js-xlsx ，能夠繼續單元格合並，速度也有了很大提升之后，領導又說，能設置樣式嗎？例如標題字體、居中等等。我查找了相關的資料，js-xlsx這個插件是支持樣式設置的，我安裝網上的方法一一嘗試了下，都沒有作用。最后，通過請教了一位大神，得到了想要的結果。

　　1、js-xlsx 插件設置樣式可能需要一起其他三方放文件。他就是xlsx-style。引用其中的xlsx.core.min.js文件。除此之外，還另外加了一些其他的代碼。如下：

(function (win, doc, undefined) {

    var xlsxUtils = (function () { var t = { Binary: { fixdata: function (e) { for (var r = "", t = 0, n = 10240; t < e.byteLength / n; ++t)r += String.fromCharCode.apply(null, new Uint8Array(e.slice(t * n, t * n + n))); return r += String.fromCharCode.apply(null, new Uint8Array(e.slice(t * n))) }, s2ab: function (e) { for (var r = new ArrayBuffer(e.length), t = new Uint8Array(r), n = 0; n != e.length; ++n)t[n] = 255 & e.charCodeAt(n); return r } }, _wb: null, _rABS: !1, import: function (e, r) { this.wb = null; var n = new FileReader; n.onload = function (e) { var n = e.target.result; t._wb = t._rABS ? XLSX.read(btoa(t.Binary.fixdata(n)), { type: "base64" }) : XLSX.read(n, { type: "binary" }), "function" == typeof r && r(t._wb) }, t._rABS ? n.readAsArrayBuffer(e) : n.readAsBinaryString(e) }, getSheetByName: function (e) { return XLSX.utils.sheet_to_json(t._wb.Sheets[e]) }, getSheetByIndex: function () { var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0; return t.getSheetByName(t._wb.SheetNames[e]) }, export: function (e, r) { var n = null; for (var o in e) { var a = t.format2Sheet(e[o]); n = t.format2WB(a, o, n) } return t.format2Blob(n, r) }, readDataHead: function (e) { var r = {}, t = Array.isArray(e) ? Object.keys(e[0]) : e, n = !0, o = !1, a = void 0; try { for (var i, f = t[Symbol.iterator](); !(n = (i = f.next()).done); n = !0) { var u = i.value; r[u] = u } } catch (e) { o = !0, a = e } finally { try { !n && f.return && f.return() } finally { if (o) throw a } } return r }, format2Sheet: function (e, r, n, o) { o = o || Object.keys(e[0]), r = r || 0, n = n || 0; var a = {}; return e.map(function (e, a) { return o.map(function (o, i) { return Object.assign({}, { v: e[o], position: (i + r > 25 ? t.getCharCol(i + r) : String.fromCharCode(65 + (i + r))) + (a + 1 + n) }) }) }).reduce(function (e, r) { return e.concat(r) }).forEach(function (e, r) { return a[e.position] = { v: e.v } }), a }, format2WB: function (e, r, t, n) { r = r || "mySheet"; var o = Object.keys(e); return t || (t = { Sheets: {}, SheetNames: [] }), t.SheetNames.push(r), t.Sheets[r] = Object.assign({}, e, { "!ref": n || o[0] + ":" + o[o.length - 1] }), t }, format2Blob: function (e, r) { return new Blob([t.Binary.s2ab(XLSX.write(e, { bookType: void 0 == r ? "xlsx" : r, bookSST: !1, type: "binary" }))], { type: "" }) }, getCharCol: function (e) { for (var r = "", t = 0; e > 0;)t = e % 26 + 1, r = String.fromCharCode(t + 64) + r, e = (e - t) / 26; return r } }; return t })();

    win.xlsxUtils = xlsxUtils;

}(window, document))

　　可以看出這段代碼是經過壓縮過的，無法解讀。。。。將其復制到一個js文件中，引入該js文件即可。

　　2、對下載函數的封裝。s2ab()、saveAs()還和以前的一樣，不需要修改，需要修改的是downloadExl()方法。 可訪問 https://www.cnblogs.com/toyNotes/p/8617483.html 閱讀

/**
 * 導出列表方法
 * @param {*} data  需要導出的數據  數組形式  [[表頭]，[數據1]，[數據2]...]
 * @param {*} fileName 下載的文件名稱
 * @param {*} titleName 表格標題
 * @param {*} time  表格時間范圍
 * @param {*} keyMap   排序標准
 * @param {*} district   地區名稱
 * @param {*} condition  篩選條件
 * @param {*} specialObj   特殊要求，全站搜索使用
 */
var downloadExl = function(data, fileName,titleName,time = '無',keyMap,district,condition,specialObj = []) {
  const self = this;
    data.unshift({});//空出標題等行
    data.unshift({});
    data.unshift({});
    data.unshift({});
    data = xlsxUtils.format2Sheet(data, 0, 0, keyMap);//偏移3行按keyMap順序轉換
    var wb = xlsxUtils.format2WB(data, undefined, undefined);
    const range = keyMap.length - 1;
    const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
    var dataInfo = wb.Sheets[wb.SheetNames[0]];

    dataInfo["A1"].v = district + '廣播電視安全播出監管中心'; //設置表格標題
    dataInfo["A2"] = {v: titleName}; //設置表格標題
    dataInfo["A3"] = {v: '日期：' + time}; //設置表格日期
    dataInfo["A4"] = {v: condition}; //設置篩選條件
    dataInfo["!merges"] = [{//合並第一行數據[B1,C1,D1,E1]
          s: {//s為開始
              c: 0,//開始列
              r: 0,//開始取值范圍
          },
          e: {//e結束
              c: range,//結束列
              r: 0//結束范圍
          }
        },{//合並第一行數據[B2,C2,D2,E2]
          s: {//s為開始
              c: 0,//開始列
              r: 1,//開始取值范圍
          },
          e: {//e結束
              c: range,//結束列
              r: 1//結束范圍
          }
      },{//合並第一行數據[B3,C3,D3,E3]
        s: {//s為開始
            c: 0,//開始列
            r: 2,//開始取值范圍
        },
        e: {//e結束
            c: range,//結束列
            r: 2//結束范圍
        }
      },{//合並第一行數據[B3,C3,D3,E3]
        s: {//s為開始
            c: 0,//開始列
            r: 3,//開始取值范圍
        },
        e: {//e結束
            c: range,//結束列
            r: 3//結束范圍
        }
      }
    ];

    if(specialObj){
      let rowNum = 5;
      _.each(specialObj,(data,index)=>{
        if(data.num){
          dataInfo['A' + rowNum].v = data.name + '列表';
          dataInfo['A' + rowNum].s = {  //設置副標題樣式
            font: {
              name: '宋體',
              sz: 14,
              color: {rgb: "#FFFF0000"},
              bold: false,
              italic: false,
              underline: false
            },
            alignment: {
              horizontal: "center" ,
              vertical: "center"
            }
          };
          dataInfo["!merges"].push(
            {
              s: {//s為開始
                c: 0,//開始列
                r: rowNum - 1,//開始取值范圍
            },
            e: {//e結束
                c: range,//結束列
                r: rowNum - 1//結束范圍
            }
          }
          )
          _.each(dataInfo,(data,key)=>{
            if(key.replace(/[^0-9]/ig,"") == (rowNum +1)){

              dataInfo[key].s = {
                font: {
                  name: '宋體',
                  sz: 11,
                  color: {rgb: "#FFFF0000"},
                  bold: true,
                  italic: false,
                  underline: false
                },
                alignment: {
                  horizontal: "center" ,
                  vertical: "center"
                }
              };
            }
          })
          rowNum += data.num + 1;
        }
      })
    }

  dataInfo["A1"].s = {  //設置主標題樣式
      font: {
        name: '宋體',
        sz: 18,
        color: {rgb: "#FFFF0000"},
        bold: true,
        italic: false,
        underline: false
      },
      alignment: {
        horizontal: "center" ,
        vertical: "center"
      }
    };
  dataInfo["A2"].s = {  //設置副標題樣式
      font: {
        name: '宋體',
        sz: 16,
        color: {rgb: "#FFFF0000"},
        bold: false,
        italic: false,
        underline: false
      },
      alignment: {
        horizontal: "center" ,
        vertical: "center"
      }
    };
  dataInfo["A3"].s = {  //設置日期樣式
      font: {
        name: '宋體',
        sz: 11,
        color: {rgb: "#FFFF0000"},
        bold: false,
        italic: false,
        underline: false
      }
    };
  dataInfo["A4"].s = { 
      font: {
        name: '宋體',
        sz: 11,
        color: {rgb: "#FFFF0000"},
        bold: false,
        italic: false,
        underline: false
      }
    };
    if(specialObj.length == 0){
      _.each(dataInfo,(data,key)=>{          //設置表頭樣式      由於表頭是第四行，所以判斷其表格單元格編號是否是 4
        if(key.replace(/[^0-9]/ig,"") == 5){

          dataInfo[key].s = {
            font: {
              name: '宋體',
              sz: 11,
              color: {rgb: "#FFFF0000"},
              bold: true,
              italic: false,
              underline: false
            },
            alignment: {
              horizontal: "center" ,
              vertical: "center"
            }
          };

        }else if(key.replace(/[^0-9]/ig,"") != 1 && key.replace(/[^0-9]/ig,"") != 2 && key.replace(/[^0-9]/ig,"") != 3){
          dataInfo[key].s = {
            font: {
              name: '宋體',
              // sz: 11,
              color: {rgb: "#FFFF0000"},
              // bold: false,
              // italic: false,
              // underline: false
            }
            // alignment: {
            //   horizontal: "center" ,
            //   vertical: "center"
            // }
          };
        }
      })
    }

     self.saveAs(xlsxUtils.format2Blob(wb), fileName +".xlsx");
    };

　　這個是我封裝的方法，里面有一些適應不同的導出列表的格式要求。個人覺得還有很大的改進空間，對這個插件的理解有限，歡迎各路大神指點。