如下

npm i 依赖

npm i xlsx

npm i xlsx-style-vite

1、简单的使用：.vue文件中使用

const dataSource = ref([]) // 数据源

const columns = [
	{
		title: '用户名',
		key: 'userName',
		width: 120,
	},
	{
		title: '用户组',
		key: 'userGroup',
		width: 120,
	},
	{
		title: '状态',
		key: 'enable',
		width: 100,
	},
	{
		title: '余额',
		key: 'balance',
		width: 120,
	},
	{
		title: 'NB余额',
		key: 'nbBalance',
		width: 120,
	},
	{
		title: '创建时间',
		key: 'createTime',
		width: 180,
	},
	{
		title: '操作',
		key: 'action',
		width: 200,
		fixed: 'right',
	},
]


-------------------------------------------------------------------------------------------------

const transData = (columns: any, tableList: any) => {
	const obj = columns.reduce((acc: any, cur: any) => {
		if (!acc.titles && !acc.keys) {
			acc.titles = []
			acc.keys = []
		}
		acc.titles.push(cur.title)
		acc.keys.push(cur.key)
		return acc
	}, {})
	console.log('obj=', obj)
	
	const tableBody = tableList.map((item: any) => {
		return obj.keys.map((key: string) => item[key])
	})
	console.log('tableBody=', tableBody)
	
	return [obj.titles, ...tableBody]
}

const exportExcel = () => {
	const tableData = transData(columns, dataSource.value)
	console.log('tableData=', tableData)
	
	// 将数据数组转换为工作表
	const ws = XLSX.utils.aoa_to_sheet(tableData)
	
	// 创建workbook
	const wb = XLSX.utils.book_new()
	ws['!ref'] = `A1:AI${tableData.length}`
	
	// 设置列宽，这里只设置了前6列的列宽
	ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }]
	
	/*
    合并单元格：【s：start合并开始、 e：end合并结束、r：row行、c：col列】
      如：
          { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }，表示：A1 与 B1，合并为A1的内容
          
          其实就是：0：代表第一行，或第一列；1：代表第二行，或第二列；
	*/
	ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 0 } }]
	
	// 将 工作表 添加到 workbook
	XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
	
	// 将 workbook 写入文件
	XLSX.writeFile(wb, 'tablename.xlsx')
}

给单元格添加样式

其他代码同上

const exportExcel = () => {
  const tableData = transData(columns, dataSource.value)
  console.log('tableData=', tableData)

  // 将数据数组转换为工作表
  const ws = XLSX.utils.aoa_to_sheet(tableData)

  // 创建workbook
  const wb = XLSX.utils.book_new()
  ws['!ref'] = `A1:AI${tableData.length}`

  // 设置列宽，这里只设置了前6列的列宽
  ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }]

  /*
    合并单元格：【s：start合并开始、 e：end合并结束、r：row行、c：col列】
      如：
          { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }，表示：A1 与 B1，合并为A1的内容

          其实就是：0：代表第一行，或第一列；1：代表第二行，或第二列；
  */
  ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 0 } }]

  // 自定义表格样式
  for (let key in ws) {
    if (key == '!ref' || key == '!merges' || key == '!cols' || key == '!rows') {
      continue
    } else {
      console.log('key=', key)      

      // 通过key值，来选择筛选想要设置样式的单元格
      if (key == 'A2') {
        console.log('ws[key]=', ws[key])

        ws[key].s = {
          // 设置单元格样式
          fill: {
            // 设置背景色
            fgColor: { color: 'red' },
          },
          font: {
            // 设置字体
            name: '等线', // 字体名称
            sz: 16, // 字体大小
            bold: true, // 字体是否加粗
            color: {
              // 字体颜色
              rgb: '1890ff',
            },
          },
          border: {
            // 设置边框
            top: {
              style: 'thin',
              color: {
                rgb: '1890ff',
              },
            },
            bottom: {
              style: 'thin',
              color: {
                rgb: '1890ff',
              },
            },
          },
          alignment: {
            horizontal: 'center', // 横向（向左、向右、居中）
            vertical: 'center', // 纵向（向上、向下、居中）
            wrapText: true, // 设置单元格自动换行，目前仅对非合并单元格生效
            indent: 2, // 设置单元格缩进
          },
        }
      }
    }
  }

  // 将 工作表 添加到 workbook
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

  // 将 workbook 写入文件
  XLSX.writeFile(wb, 'tablename.xlsx')
}

const transData = (columns: any, tableList: any) => {
  const obj = columns.reduce((acc: any, cur: any) => {
    if (!acc.titles && !acc.keys) {
      acc.titles = []
      acc.keys = []
    }
    acc.titles.push(cur.title)
    acc.keys.push(cur.key)
    return acc
  }, {})
  console.log('obj=', obj)

  const tableBody = tableList.map((item: any) => {
    return obj.keys.map((key: string) => item[key])
  })
  console.log('tableBody=', tableBody)

  return [obj.titles, ...tableBody]
}