vue3实现表格数据导出Excel（自定义表头中文名）

在Vue 3中，可以使用第三方库xlsx来实现将表格数据导出为Excel文件。以下是一个简单的例子：

1. 安装xlsx库：

npm install xlsx file-saver

2. 在Vue组件中使用xlsx库：

import { ref } from 'vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
 
export default {
  setup() {
    const tableData = ref([
      { name: '张三', age: 30, email: 'zhangsan@example.com' },
      { name: '李四', age: 24, email: 'lisi@example.com' },
      // ...更多数据
    ]);
 
    const exportToExcel = () => {
      // 表格标题
      const ws_name = 'Sheet1';
      // 表头中文名
      const header = {
        "姓名": 'name',
        "年龄": 'age',
        "邮箱": 'email'
      };
      // 表格数据
      const data = tableData.value.map((row) => {
        return {
          name: row.name,
          age: row.age,
          email: row.email
        };
      });
      // 工作表
      const ws = XLSX.utils.json_to_sheet(data, { header });
 
      // 生成工作簿
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
 
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
 
      // 字符串转ArrayBuffer
      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
 
      // 下载文件
      saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'data.xlsx');
    };
 
    return {
      tableData,
      exportToExcel
    };
  }
};

3. 在模板中添加按钮来触发导出：

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

这段代码定义了一个exportToExcel函数，它会遍历表格数据，将其转换为Excel可以理解的格式，并最终通过saveAs函数提供下载功能。用户点击按钮时，将触发该函数，并提示用户下载Excel文件。