如何使用 Grid 组件导出 Excel 的格式文件，以及插件如何引入问题

[yxliuHTML]

求助：如何使用 Grid 组件导出 Excel 的格式文件

问题：看了安装插件 @vxe-ui/plugin-export-xlsx 文档
https://vxeui.com/other4/#/plugin-export-xlsx/install
在全局引入 apps/web-antd/src/main.ts 发现与vben5文档不符合，或者此引入是否在apps/web-antd/src/bootstrap.ts文件中进行引入呢

建议：更新 vben5官网引入其他库的案例

[dingdayu]

有点太久了，不知道下面说的是否完整，你可以尝试看看：

1. 在 apps 下项目的目录下的 src 中的 adapter 中 vxe-table.ts 导入 import ExcelJS from 'exceljs';

import ExcelJS from 'exceljs';

2. 配置 vxeUI.use

vxeUI.use(VxeUIPluginExportXLSX, {
  ExcelJS,
});

完整的代码：

import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, Image } from 'ant-design-vue';

import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx';
import ExcelJS from 'exceljs';

import { useVbenForm } from './form';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'items',
            total: 'total',
            list: 'items',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return h(Image, { src: row[column.field] });
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          Button,
          { size: 'small', type: 'link' },
          { default: () => props?.text },
        );
      },
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add

    vxeUI.use(VxeUIPluginExportXLSX, {
      ExcelJS,
    });
  },
  useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';

然后在 gridOptions 中配置 exportConfig 即可

  exportConfig: {
    filename: '列表',
    modes: ['current'],
    type: 'xlsx',
    excludeFields: ['id', 'action'], // 排除不导出的字段列
  },