使用xlsx-style设置多级表头边框，边框显示不完整

// 设置表格样式
setExlStyle(data,rowAndColHWList) {
  Object.keys(data).forEach(key => {
    //设置每个单元格属性
    if (key.indexOf("!") < 0) {
      data[key].s = {
        // 边框
        border: {
          top: {
            style: "thin"
          },
          bottom: {
            style: "thin"
          },
          left: {
            style: "thin"
          },
          right: {
            style: "thin"
          }
        },
      }
    }
  })
  return data;
},

原因：创建的workbook或者worksheet并不会包含合并单元格之后的子单元格

 例如该worksheet中只有A1，没有A2和A3，而缺失的边框正是该两个单元格，所以通过遍历表格单元格的方式设置边框会出现边框缺失的问题。

那么解决办法就显而易见了，只需要加上xlsx没有自动创建的单元格，并且给他们设置上边框即可。

// data 可以传入一个workbook或者worksheet
setExlStyle(data) {
  // 定义好边框样式
  const border = {
    top: {
      style: "thin"
    },
    bottom: {
      style: "thin"
    },
    left: {
      style: "thin"
    },
    right: {
      style: "thin"
    }
  }
  // 字体
  const font = {
    sz: 10,
    // bold: true,
    // color: {  rgb: "FFFFFF" } //白色
  }
  // 居中
  const alignment = {
    horizontal: "center",
    vertical: "center",
    wrapText: true
  }

  // 获取表格的有效范围
  const range = XLSX.utils.decode_range(data['!ref']);
  // cellList：xlsx自动创建的excel单元格，去掉带！开头的就是所有单元格
  const cellList = Object.keys(data).filter(item => item.indexOf('!') < 0)
  
  // 遍历表格
  for(let row = range.s.r; row <= range.e.r; row++){
    for(let col = range.s.c; col <= range.e.c; col++){
      // 通过行列转成excle的单元格索引
      const cell = XLSX.utils.encode_cell({ r:row, c:col });
      // 查找一下单元格是否已经存在，不存在：创建一个单元格并设置边框，存在：直接修改样式
      if(cellList.indexOf(cell) < 0){
        data[cell] = {t:'',v:'',s:{ border,font,alignment } }
      } else {
        data[cell].s = { border,font,alignment }
      }
    }
  }
  return data;
},

通过以上方法即可让所有单元格都加上完整的边框。

其中const range = XLSX.utils.decode_range(data['!ref']);得到的结果是这样的：

 

s：开始，e：结束，r：行，c：列

分别对应start、end、row、column的缩写

const cell = XLSX.utils.encode_cell({ r:row, c:col });传入行和列索引，可以得到该坐标在excel中的单元格索引，例如A1、B3这种。