vue组件导出excel,并且可以合并单元格，设置宽度，字体颜色，换行等

进了吧

于 2023-07-17 16:26:33 发布

阅读量1.9k

点赞数

分类专栏：前端 Vue 文章标签： excel vue 导出excel xlsx xlsx-style file-saver

本文链接：https://blog.youkuaiyun.com/qq_40247562/article/details/131768302

版权

本文介绍了在Vue后台管理系统中如何使用xlsx、xlsx-style和file-saver插件来实现Excel导出功能。内容包括合并单元格、设置字体颜色和宽度，以及根据' '自动换行。注意不同版本间的兼容性问题，并提供了数据格式和组件调用方法的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在开发后台管理系统中，经常会有导出表格的需求，本案例实现了在导出时，可以合并单元格，设置单元格字体颜色和宽度，并且可以根据 '\n' 自动换行

插件：xlsx（0.18.4），xlsx-style（0.8.13），file-saver（2.0.5）

效果如下：

注意：不同的版本之间可能方法不能共用

注意：数据格式如下需根据自己的业务组装

exportData:[
    ['姓名','年龄','性别','粉丝'],
    [王1','11','男','22'],
    [王1','112','女','23'],
]

mergesData:[
    {
        s:{r:0,0}
        r:{r:1,0}
    },
    ......
]


columnWidth:[
    {wch:12},
    {wch:13},
    {wch:14},
    {wch:20},
]

组件如下：