vxe-table 导出 XLSX 文件：主动睁开分组并导出图片

在利用 vxe-table 导出 Excel（xlsx）文件时，如果表格包罗数据分组（行分组），默认导出的文件会保持收拢状态。通过设置可以实现在导出的 Excel 中主动睁开全部分组层级。别的，如果单位格中须要导出图片，则必须确保图片 URL 是有效且答应跨域访问的，否则图片无法导出。
安装导出插件

vxe-table 默认不包罗 Excel 导出功能，须要显式安装并注册官方导出插件（基于 ExcelJS）。

1. npm install @vxe-ui/plugin-export-xlsx exceljs

复制代码

1. import { VxeUI } from 'vxe-table'
3. import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'
4. import ExcelJS from 'exceljs'
6. VxeUI.use(VxeUIPluginExportXLSX, {
7.   ExcelJS
8. })

复制代码

留意：如果未注册此插件，exportData 和工具栏导出按钮将无法正常工作。
实现方式

• 
  
  • 主动睁开分组层级
    
  
  
  
  
  • 全局设置：在 gridOptions.exportConfig 中设置 isRowGroupAllExpanded: true，全部通过工具栏“导出”按钮触发的操纵都会默认睁开分组。
    
  • 动态导出：通过编程方式调用 exportData 时，可以在参数中传入 isRowGroupAllExpanded: true，按需控制本次导出是否睁开分组。
    
  
  
• 
  
  • 图片导出条件
    
  
  
  
  
  • 图片 URL 必须可访问且返回有效的图片格式（如 PNG、JPEG、GIF）。
    
  • 目的图片服务器必须支持跨域哀求（CORS），否则 vxe-table 无法读取图片内容并写入 Excel 文件。
    
  • 如果图片是第三方 URL 且无法控制跨域计谋，可思量：
    
    
    
    • 利用后端署理将图片转为 Base64 再转达给表格。
      
    • 将图片预加载为当地 DataURL 再导出（须要额外处置惩罚）。
      
    
    
  
  

代码

通过 export-config.isRowGroupAllExpanded 设置默认是否主动睁开分层级

1. <template>
2.   
3.     <vxe-button status="primary" @click="exportEvent">直接导出</vxe-button>
4.     <vxe-button status="primary" @click="openEvent">高级导出</vxe-button>
5.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
6.   
7. </template>

复制代码

阐明

留意点阐明分组字段划一性设置 rowGroupNode: true 的列必须与 aggregateConfig.groupFields 中的字段名称完全划一。导出性能当数据量较大且分组嵌套层级较深时，睁开全部分组会导致导出的 Excel 行数激增，大概影响性能和文件巨细。图片跨域设置确保图片服务器返回 Access-Control-Allow-Origin: * 或指定域名，否则导出后图片单位格为空。Excel 文件格式限定ExcelJS 写入图片时会保持原始宽高比，但发起图片尺寸适中，制止单位格过高。插件依赖必须安装 @vxe-ui/plugin-export-xlsx 和 exceljs，并在项目中精确注册，否则导出功能不可用。https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.