使用`xlsx-js-style`插件导出表格，并添加样式导出

安装

npm install xlsx-js-style --save

使用

1. 引入

  import XLSX from 'xlsx-js-style'
  
  // 最好是定义一个表个通用数据，循环得到相关数据
   const tableHeader =  [
        { header: '序号', key: 'index', width: 24 },
        { header: '编号', key: 'number', width: 100 },
        { header: '说明', key: 'ex', width: 24 }
      ],

  // 模拟表格数据
  const data = [
    { index: '1', number: '123456789', ex: '1' },
    { index: '2', number: '123456789', ex: '21' },
    { index: '3', number: '123456789', ex: '222' }
  ]
  
  // 表格实际数据
  const tableData = []

  // 1.创建一个工作簿
  const wb = XLSX.utils.book_new()
  // 表格标题
     // 这里设置标题是怕数据没有，返回空表，连标题都没有
     // 这里的权重，没有数据tableData里的高,果如tableData中没有和标题一一对应，导出的表格也会展示
     // 比如：arrHeader = [a,b] 而，tableData = [{a：1,b:2,c:3}];那么表格会多一个c的列
  const arrHeader = [a,b]    //arrHeader 1维数组，表格标题

  // 创建表格数据
  // const tableData = [{a：1,b:2},{a：1,b:2}]

  // 根据内容，返回，添加表格数据，与标题字段对应 
  _data.forEach((el) => {
    // 根据表格标题，对应赋值
    const rowData = tableHeader.reduce((accumulator, item) => {
      if (item?.key) {
        accumulator[item.header] = el[item.key] ?? '-'
      }
      return accumulator
    }, {})

    // 赋值所有数据
    tableData.value.push(rowData)
  })

  // 2.创建sheet对象
    const ws = XLSX.utils.json_to_sheet(tableData,
      {
        header: arrHeader
      }
    )
  // 设置每个列宽度，有多少个，就需要添加多少
     ws['!cols'] = [
        {
            wpx: 100
        },
        {
            wpx: 100
         }
     ] 
  // 上面有多个比较麻烦，最好是从tableHeader获取
  // 根据标题设置宽度
        const tableCols = tableHeader.map(item => {
          return {
            wpx: item?.width ?? 100  // 如果没有找到，设置默认为100
          }
        })

    // 在赋值给 ws['!cols']
    ws['!cols'] = tableCols.splice(1)
  
    // 设置表格样式
        for (const i in ws) {
          if (!['!ref', '!merges', '!cols'].includes(i)) {
            ws[i].s = {
              border: {
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              },
              font: {
                sz: 9
              },
              // 内容居中
              alignment: {
                horizontal: 'center',
                vertical: 'center',
                wrap_text: true
              }
            }

            // 判断，标题加粗，标题只有1行，大于1则不加粗
            const regex = /\d+/g
            if (!(i.match(regex)[0] > 1)) {
              ws[i].s = {
                border: {
                  top: { style: 'thin' },
                  bottom: { style: 'thin' },
                  left: { style: 'thin' },
                  right: { style: 'thin' }
                },
                // 内容居中
                alignment: {
                  horizontal: 'center',
                  vertical: 'center',
                  wrap_text: true
                },
                font: {
                  sz: 9,
                  bold: true,
                  color: {
                    rgb: '000000' // 十六进制，不带#
                  }
                },
                fill: {
                  fgColor: { rgb: 'ECF5FF' } // 填充颜色
                }
              }
            }
          }
        }
  

  // 3.将 sheet 对象插入工作簿，sheetName为名称
  XLSX.utils.book_append_sheet(wb, ws, 'sheetName')


  // 4.下载 excel
  XLSX.writeFile(wb, `导出表格.xlsx`)

-
-
-