在上面方法的基础上自定义字段并且第一行使用对应字段名称的表头

如果要自定义字段并且第一行使用对应字段名称的表头，可以对代码进行一些修改。以下是一个示例：

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

<script>
import * as XLSX from 'xlsx'
import * as FileSaver from 'file-saver'

export default {
  data() {
    return {
      fields: ['name', 'age', 'gender'], // 自定义字段
      data: [
        { name: 'John', age: 30, gender: 'Male' },
        { name: 'Mary', age: 25, gender: 'Female' },
        { name: 'Bob', age: 40, gender: 'Male' },
      ],
    }
  },
  methods: {
    exportExcel() {
      // 创建工作簿和工作表
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.json_to_sheet(this.data, { header: this.fields })

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

      // 将工作簿转换为Blob对象，并保存为Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([wbout], { type: 'application/octet-stream' })
      FileSaver.saveAs(blob, 'data.xlsx')
    }
  }
}
</script>

在这个示例中，我们定义了一个`fields`数组，包含自定义的字段名称。然后，我们修改了`json_to_sheet`方法的第二个参数，将`header`设置为`this.fields`，以使用自定义的字段名称作为表头。