使用xlsx、xlsx-style导出表格添加背景色；合并单元格部分样式缺失问题解决

这篇说一下使用xlsx-style导出excel时样式的设置。需要安装xlsx、xlsx-style、file-saver插件（file-saver可以不装，用a标签代替也可以），安装时可能会碰到一些报错问题，可以去看下我之前一篇博客：纯前端导出Excel并修改样式

由于上次写的修改样式只关注了单元格的宽度，并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题，所以这篇来说下。

我们通过xlsx可以通过dom元素、或者数据来生产sheet页，然后我们修改样式就操作对应的sheet页就可以了。

直接上代码如下：

我这个是直接通过传入dom生产的sheet页，也可以通过数据生成sheet页，xlsx都有对应的方法，其实不影响我们修改样式 。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'

/**
 * 根据DOM进行导出
 * @param {Element} dom 
 * @param {String} fileName 
 */
export function exportExcelByDom(dom, fileName) {
  const book = XLSX.utils.book_new()
  const sheet = XLSX.utils.table_to_sheet(dom)
  XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')
  addRangeBorder(sheet['!merges'], sheet) // 给合并行列赋值样式
  setExcelStyle(sheet) // 设置样式
  let wbout = XLSXS.write(book, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  })
  try {
    FileSaver.saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName);
  } catch (e) {
    console.error(e, wbout, '----->>>')
  }
}

// 设置导出Excel样式（统一样式）
function setExcelStyle(data, wpx = 80) {
  data["!cols"] = []
  const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      if (!excludes.includes(key)) {
        data[key].s = {
          alignment: {
            horizontal: "center", //水平居中对齐
            vertical: "center", // 垂直居中
            wrapText: true,
          },
          border: {
            top: {
              style: 'thin',
              color: { rgb: '000000' }
            },
            bottom: {
              style: 'thin',
              color: { rgb: '000000' }
            },
            left: {
              style: 'thin',
              color: { rgb: '000000' }
            },
            right: {
              style: 'thin',
              color: { rgb: '000000' }
            }
          },
          // fill: {
          //   fgColor: { rgb: "00a2ff" },
          // },
          font: {
            sz: 11,
          },
          bold: true,
          numFmt: 0
        }
        // 单元格宽度
        data["!cols"].push({ wpx });
        // 根据不同行添加单元格背景颜色
        let color = ''
        let num = Number(key.slice(1))
        if (num < 12) {
          color = 'f8cbad'
        } else if (num >= 12 && num < 22) {
          color = '70ad47'
        } else if (num >= 22 && num < 24) {
          let letter = key[0]
          const leftCol = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
          if(leftCol.includes(letter)) {
            color = '9bc2e6'
          } else {
            color = '8ea9db'
          }
        } else if(num >= 24 && num < 26) {
          color = '00b0f0'
        } else if (num >= 26 && num < 29) {
          color = 'fff2cc'
        } else if (num >= 29 && num < 44) {
          color = 'a9d08e'
        } else {
          color = 'bfbfbf'
        }
        data[key].s.fill = { fgColor: { rgb: color, patternType: 'solid' } }
      }
    }
  }
}

//给合并行列赋值样式
function addRangeBorder (range, ws) {
  let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  range.forEach(item => {
    let style = {
      s: {
        border: {
          top: {
            style: 'thin',
            color: { rgb: '000000' }
          },
          bottom: {
            style: 'thin',
            color: { rgb: '000000' }
          },
          left: {
            style: 'thin',
            color: { rgb: '000000' }
          },
          right: {
            style: 'thin',
            color: { rgb: '000000' }
          }
        }
      }
    }
    // 处理合并行
    for (let i = item.s.c; i <= item.e.c; i++) {
      ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
      // 处理合并列
      for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
        ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
      }
    }
  })
  return ws;
}

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
}

调用：

exportExcelByDom(document.getElementById('custom-table'), '生产日报表.xlsx')

然后下面是我开发的表格长这个样子：

 

上面两种图片是一个表格哈，比较长，其实下面还有，然后导出的效果是这样子：