excel表格导出

小编曾试过很多的方法，能够导出excel表格，但是表格的样式设置怎么都没有办法。

最终找到了一个插件exceljs,能够解决表格的导出以及样式的设置

一、插件准备

npm i exceljs

npm i file-saver

二、在页面中进行引入

import { saveAs } from 'file-saver'

import * as ExcelJs from 'exceljs'

三、在页面中使用

 首先需要一个按钮用来导出excel

   <button @click='excel'>导出excel</button>

接着来写点击的方法

const excel = () => {
  // 创建一个新的工作薄
  const workbook = new ExcelJs.Workbook()
  // 给新的工作薄起一个名字
  const worksheet = workbook.addWorksheet('奥特曼')
  // 设置每一列的字段
  worksheet.columns = [
    { header: '姓名', key: 'name', width: 20 },
    { header: '年龄', key: 'age', width: 30 },
    { header: '身高', key: 'tall', width: 20 },
    { header: '成绩', key: 'test', width: 20 },
    { header: '成绩1', key: 'test1', width: 20 }
  ]

  // 数据列表
  const list = [
    { name: '', age: '', tall: '', test: '平时成绩', test1: '期末成绩' },
    { name: '小红', age: '30', tall: '100', test: '1000', test1: '2000' },
    { name: '张三', age: '30', tall: '100', test: '1000', test1: '3000' },
    { name: '张三', age: '30', tall: '100', test: '1000', test1: '4000' },
    { name: '东东', age: '10', tall: '100', test: '1000', test1: '5000' }
  ]
  // 把数据添加到表格中
  worksheet.addRows(list)
  // 进行样式修改
  // 遍历工作表中具有值的所有行
  worksheet.eachRow(function (row, rowNumber) {
    // 遍历所有行中的所有单元格
    row.eachCell(cell => {
      // 设置所有单元格的内容居中
      cell.alignment = {
        vertical: 'middle',
        horizontal: 'center'
      }
    })
  })
  // 设置首行的格式
  const firstrow = worksheet.getRow(1)
  firstrow.height = 42.5
  firstrow.eachCell(cell => {
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: {
        argb: 'FF0000'
      },
      size: 20
    }
  })
  // 设置第二行格式
  const firstrow1 = worksheet.getRow(2)
  firstrow1.height = 42.5
  firstrow1.eachCell(cell => {
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: {
        argb: 'FF0000'
      },
      size: 20
    }
  })
  // 合并单元格
  worksheet.mergeCells('D1:E1')
  worksheet.mergeCells('A1:A2')
  worksheet.mergeCells('B1:B2')
  worksheet.mergeCells('C1:C2')

  // 写入数据
  workbook.xlsx.writeBuffer().then(data => {
    const blob = new Blob([data])
    saveAs(blob, '奥特曼.xlsx')
  })
}

 这里需要注意，如果你的数据是从后台获得的，并且是多层结构   数组包对象结构，那么在写表头结构的时候就需要注意，需要进行遍历，把变成一层数据结构。这样数据才能够显示出来。

 

这个是导出的excel表格的样式：

 如果大家还想设计一些别的样式，可以参考官方文档：

exceljs/README_zh.md at 860b862d122c2645f8b34f0f885a64b104f7a538 · exceljs/exceljs · GitHub