导出工具

本文档介绍前端导出工具的使用方法。

ExportUtils

导出工具类，支持导出 Excel、CSV、JSON 等格式。

导出 Excel

import { ExportUtils } from '@vben/utils';

// 基础导出
const data = [
  { name: '张三', age: 25, email: 'zhangsan@example.com' },
  { name: '李四', age: 30, email: 'lisi@example.com' }
];

ExportUtils.exportExcel(data, '用户列表');

// 自定义列
ExportUtils.exportExcel(data, '用户列表', {
  columns: [
    { header: '姓名', key: 'name' },
    { header: '年龄', key: 'age' },
    { header: '邮箱', key: 'email' }
  ]
});

// 导出多个 Sheet
ExportUtils.exportExcel([
  { sheetName: '用户', data: userData },
  { sheetName: '角色', data: roleData }
], '系统数据');

导出 CSV

import { ExportUtils } from '@vben/utils';

const data = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 }
];

ExportUtils.exportCSV(data, '用户列表.csv');

导出 JSON

import { ExportUtils } from '@vben/utils';

const data = {
  users: [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
  ]
};

ExportUtils.exportJSON(data, '用户数据.json');

导出 TXT

import { ExportUtils } from '@vben/utils';

const text = '这是要导出的文本内容';

ExportUtils.exportTXT(text, '说明.txt');

使用 xlsx 库

import * as XLSX from 'xlsx';

// 从表格数据创建工作簿
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 导出
XLSX.writeFile(workbook, '文件名.xlsx');

完整示例

<script setup lang="ts">
import { ref } from 'vue';
import { ExportUtils } from '@vben/utils';
import { message } from 'ant-design-vue';

const tableData = ref([
  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
  { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
]);

function handleExportExcel() {
  try {
    ExportUtils.exportExcel(tableData.value, '用户列表', {
      columns: [
        { header: 'ID', key: 'id' },
        { header: '姓名', key: 'name' },
        { header: '年龄', key: 'age' },
        { header: '邮箱', key: 'email' }
      ]
    });
    message.success('导出成功');
  } catch (error) {
    message.error('导出失败');
  }
}

function handleExportCSV() {
  ExportUtils.exportCSV(tableData.value, '用户列表.csv');
  message.success('导出成功');
}
</script>

<template>
  <div>
    <a-button type="primary" @click="handleExportExcel">
      导出 Excel
    </a-button>
    <a-button @click="handleExportCSV" style="margin-left: 10px">
      导出 CSV
    </a-button>
  </div>
</template>

API 参考

exportExcel

导出 Excel 文件。

ExportUtils.exportExcel(
  data: any[],
  filename: string,
  options?: {
    columns?: Array<{ header: string; key: string }>;
    sheetName?: string;
  }
): void

exportCSV

导出 CSV 文件。

ExportUtils.exportCSV(
  data: any[],
  filename: string
): void

exportJSON

导出 JSON 文件。

ExportUtils.exportJSON(
  data: any,
  filename: string
): void

参考资源

• xlsx 文档