vxe-table 导出 Excel 进阶教程：自界说样式与高级功能

vxe-table 不但支持将表格数据导出为 .xlsx 文件，还提供了强大的自界说样式本领。通过 exportConfig.sheetMethod 钩子，你可以直接利用底层的 ExcelJS 工作表对象，对导出的 Excel 举行精致化样式设置，包罗边框、字体、配景致、列宽、行高、超链接、图片等。

• 前置预备：请确保已安装并注册 @vxe-ui/plugin-export-xlsx 和 exceljs 插件。
  

焦点设置：sheetMethod 钩子

在 gridOptions.exportConfig 中界说 sheetMethod 函数，它会在导出过程中被调用，并吸收包罗 worksheet（工作表对象）、workbook（工作簿对象）等参数。在此函数内，你可以使用 ExcelJS 的 API 修改样式。

1. exportConfig: {
2.   sheetMethod(params) {
3.     const { worksheet, workbook } = params
4.     // 自定义样式逻辑
5.   }
6. }

复制代码

示例

设置边框

为全部单元格添加赤色细边框：

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

设置字体

将全部单元格字体设为赤色、粗体、16号：

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

设置表头配景

将前 3 行（表头地域）添补为淡蓝色配景

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

设置列宽

将全部列宽设置为 16：

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

设置行高

将全部数据行高设置为 60（单元：磅）：

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

设置超链接

为第 2 列（Name 列）的每个数据单元格添加超链接：

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

添加图片

在数据行的第 2 列单元格位置插入 Logo 图片（需确保图片服务器支持跨域）:

1. <template>
2.   
3.     <vxe-button @click="exportEvent">点击导出</vxe-button>
4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
5.   
6. </template>

复制代码

阐明

事项阐明异步处理处罚假如 sheetMethod 中包罗异步利用（如 fetch 图片），务必使用 async 函数，并等候完成。行/列索引偏移worksheet.eachRow 回调中 rowIndex 从 1 开始（1 为第一行）。列索引同样从 1 开始。图片跨域使用 fetch 加载图片时，需确保图片服务器支持跨域，否则无法获取图片内容。性能思量大表格（如凌驾 1000 行）时，遍历全部单元格设置样式大概耗时较长，发起按需设置，或仅对特定地域利用。样式覆盖某些全局样式（如列宽）假如在 sheetMethod 中设置，会覆盖默认导出样式；多步设置时留意次序。ExcelJS 版本兼容插件依靠 exceljs，发起版本 ^4.3.0，差别版本 API 大概有渺小差异，请查阅对应文档。https://vxetable.cn

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