前端导出Execl

       今天遇到这样的一个需求，需要导出一个execl表格，并且表头需要合并以及字体的样式也要调整，本来想着这是后端的事，但是后端人员说以前都是前端的导出你看看以前怎么做的吧，没办法我只能找到以前的代码看看，一看之下这也不符合我们这个需求啊，就一个表格的导出，样式和合并都没有，那只能自己研究了。在网上找了许多资料也勉强算是做出来了，在这记录一下吧!

    //DOM
     <el-table id="table" :ref="table" :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="时间" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="备注" />
      </el-table>
      // 数据
     const tableData = ref([
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
        ])

首先需要下载两个插件 exceljs 和 file-saver pnpm add exceljs file-saver -s 如果使用的是ts的话 需要将exceljs改为@types/exceljs

    // 引入
    import * as Excel from 'exceljs/dist/exceljs.min.js'
    import { saveAs } from 'file-saver'
    
    // 使用
    // 1. 创建工作组（我的理解是创建一个execl文件）
    let workbook = new Excel.Workbook()
    // 2. 创建工作簿（创建一个sheet页，name为sheet页名称）
    let sheet = workbook.addWorksheet( name) 
    // 3. 创建一个数组(包含表头和表格的数据）将数据处理为下面的格式
    let arr = [
        ['时间','名称','备注'],
        ['2016-05-03','Tom','No. 189, Grove St, Los Angeles']，
        ['2016-05-02','Tom','No. 189, Grove St, Los Angeles'],
        ......
    ]
    // 4. 设置整列的样式
     let dobCol = sheet.getColumn('B') // 获取B列
     dobCol.width = 120 // 设置宽度
     dobCol.alignment = { // 设置对齐方式
        vertical:'middle',  // 垂直对齐方式
        horizontal:'center' // 水平对齐方式
      }
     dobCol.font = { //设置字体样式
         size:20, //  设置字体大小
         bold:true, // 是否加粗
         color: { argb: 'FF0000FF' } // 字体颜色（只能使用argb格式）
     }
   
     5. 设置单个单元格样式
     let cell = sheet.getCell('B2') // 获取B2单元格
     cell.alignment = { // 设置对齐方式
        vertical:'middle',  // 垂直对齐方式
        horizontal:'center' // 水平对齐方式
      }
     cell.font = { //设置字体样式
         size:20, //  设置字体大小
         bold:true, // 是否加粗
         color: { argb: 'FF0000FF' } // 字体颜色（只能使用argb格式）
     }
     6.设置合并
     sheet.mergeCells(['B3:B4']) // 将B3和B4合并
     7.将数据添加到sheet中
       sheet.addTable(
          {
            name:name,  //表格名称
            ref:'B2',   //左上格位置
            headerRow: false,   //是否显示列标题
            style: {
              theme: 'TableStyleLight15',  //设置主题样式
            },
            columns: [name:'B',name:'C',name:'D'],  //列数据有几列就要对应一个否则无法显示
            rows: arr //行数据
        }
       8.导出（filename EXECL文件名）
        // 因为workbook.xlsx.writeBuffer是异步的所以需要在then里面做操作
       workbook.xlsx.writeBuffer(filename).then((data:any) => {
          const blob = new Blob([data], { type: 'application/octet-stream' })
          saveAs(blob, filename) //导出
        })