vue3 xlsx 导出json 自定义头部 相对应数组对象中的参数名称数据

在Vue3中使用xlsx库导出JSON时，如果你想自定义头部并且映射到数组对象中的某个字段名，你可以这样做：

首先安装必要的库：

npm install xlsx axios // 如果还没安装

然后，在你的组件里，你可以创建一个函数来处理数据转换和导出：

import XLSX from 'xlsx';
import axios from 'axios';

export default {
  data() {
    return {
      headers: ['Name', 'Age'], // 自定义头部
      dataToExport: [], // 数据源，比如从API获取或者本地数组
    };
  },
  async mounted() {
    try {
      // 获取数据，这只是一个示例，实际替换为你自己的API请求
      const response = await axios.get('your-api-url');
      this.dataToExport = response.data; // 假设数据结构类似：[{name: '张三', age: 25}, ...]

      // 创建工作簿
      const workbook = XLSX.utils.book_new();
      const wsName = 'Sheet1'; // 工作表名字

      // 将数据转化为二维数组，便于导出
      const rows = this.dataToExport.map(item => Object.values(item).map(value => ({[this.headers[i]]: value})));

      // 添加工作表到工作簿，并设置标题行
      const ws = XLSX.utils.json_to_sheet(rows, {header: true});
      XLSX.utils.book_append_sheet(workbook, ws, wsName);

      // 导出为xlsx文件
      const filename = `export_${new Date().getTime()}.xlsx`;
      XLSX.writeFile(workbook, filename);
      console.log(`已成功导出至 ${filename}`);
    } catch (error) {
      console.error('Error:', error);
    }
  },
};

这里的`headers`数组表示你想在Excel文件中使用的列头名称，`Object.keys(item)`会返回数组对象中对应的键，用于构建二维数组以便于xslx处理。