vue使用XLSX插件，实现将el-table内容生成xlsx文件，并且自定义表头样式

前言：

最近工作中遇到一个需求，需要通过自定义的指标，生成数据报表。并且需要生成一份xlsx文件，后端同学将数据插入在xlsx文件中。主要问题是：表格需要自定义，可以设置表头的字体大小，字体颜色，以及表头的背景颜色

一、安装依赖插件

   npm install xslx@0.16.0 --save
   npm install xlsx-style-medalsoft@0.8.13 --save

二、页面引用

import XLSX from 'xlsx'

import XLSXStyle from 'xlsx-style-medalsoft'

三、使用方式

1、首先需要在页面上展示出对应的table表格内容，并且设置唯一id值（使用时需要获取id）

2、其次需要一个触发按钮，点击之后去实现table转xlsx文件，绑定一个点击事件

3、实现方法

    async getExcel () {
      let et = XLSX.utils.table_to_book(document.querySelector('#table'), { raw: true })
      let wbs = et.Sheets.Sheet1
      let arrA = Object.keys(wbs)
      arrA.forEach((item, index) => {
        if (wbs[item].v === '') {
          delete wbs[item]
        }
      })

        // 将自定义指标名称获取到
      let cloums = this.checkedColumns.map(item => item.name)
       // 循环遍历每一个表格，设置样式
      for (const key in wbs) {
        if (key.indexOf('!') === -1) {
          if (cloums.includes(wbs[key].v)) { // 判断是否是表头名称
            wbs[key].s = {
              font: {
                sz: 12, // 字体大小
                bold: false, // 加粗
                name: '宋体', // 字体
                color: { // 字体颜色
                  rgb: '333333', // 十六进制，不带#
                },
              },
              fill: {
                fgColor: { // 背景颜色
                  rgb: '0BEEE6',
                },
              },
              alignment: {
                // 文字居中
                horizontal: 'center',
                vertical: 'center',
                wrapText: false, // 文本自动换行
              },
              border: {
                // 设置边框
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' },
              },
            }
          }
        }
      }
      
      // 生成buffer二进制文件
      let etout = XLSXStyle.write(et, {
        bookType: 'xlsx',
        type: 'buffer',
      })

      try {
          // file为 生成的xlsx文件  （转成blob类型的文件，用于上传文件）
        let file = new Blob([etout], { type: 'application/octet-stream' })
        
      } catch (err) {
      }
    }

四、最终效果

页面配置table表头字体大小，颜色，表头背景颜色，生成对应的xlsx文件