vue导出Excel模板规定格式，可自定义样式代码示例

我之前已经提供了一个完整的 Vue 组件代码示例，其中包含了自定义样式的代码。您可以参考以下代码：

<template>
  <div>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 18 }
      ]
    }
  },
  methods: {
    exportExcel() {
      const sheet = XLSX.utils.json_to_sheet(this.tableData)
      sheet['!cols'] = [{ wch: 10 }, { wch: 20 }, { wch: 10 }]
      sheet['!rows'] = [{ hpx: 30 }, { hpx: 20 }, { hpx: 20 }]

      // 设置表头样式
      sheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }]
      sheet['A1'].s = { font: { sz: 14, bold: true }, alignment: { horizontal: 'center' }, fill: { fgColor: { rgb: 'FFC000' } } }

      // 设置单元格样式
      sheet['A2'].s = { font: { sz: 12, bold: true }, border: { top: { style: 'thin', color: { rgb: '000000' } } } }
      sheet['C2'].s = { font: { sz: 12, bold: true }, border: { top: { style: 'thin', color: { rgb: '000000' } } }, fill: { fgColor: { rgb: 'FFC000' } } }

      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1')
      XLSX.writeFile(wb, 'table.xlsx')
    }
  }
}
</script>

以上代码中，我们通过 `json_to_sheet` 方法将数据转换成 sheet 对象，然后通过修改对象的属性来设置样式，如 `!cols` 和 `!rows` 来设置列宽和行高，`!merges` 来合并单元格。同时，我们也可以设置单元格的样式，如设置字体大小、加粗、水平对齐方式、边框样式、背景色等。最后，我们通过 `XLSX.writeFile` 方法将 sheet 对象写入到新建的 Excel 文件中，并下载到本地。