vue 写导出Excel文件（复杂表格多行多列合并的）

已于 2023-10-08 15:29:59 修改
阅读量1.9k 收藏 5
点赞数 3
文章标签： vue.js excel 前端 javascript
于 2023-05-31 19:43:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56787143/article/details/130975799
版权

前些天产品提了个需求 要导出当前页面的数据，对于第一次写导出文件的我无从下手（之前都是后端写好丢给前端的），去网上搜了很多也没找到自己想要的效果。于是我科学上网了一波 找到了一个名为 xlsx-js-style 的包，然后根据这个包，完成了这个棘手的需求（我是前端小白），废话不多说，来上代码。

// 首先得先下载这个包
npm i xlsx-js-style  

// 然后在自己开发的文件夹里引入

import XLSXS from "xlsx-js-style";

这是完整代码，我用的是vue3哈  没用ts 代码很庸愚，你们可以到时候根据数据来进行push操作。

push数据的时候，看看你们的数据需要在哪一行下push ，然后从push那一行起 后面的数据都是像堆俄罗斯方块似的堆上去。

<template>
  <div>
    <button @click="exportToExcel">导出为Excel</button>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  // import { saveAs } from 'file-saver'
  // import XLSX  from 'xlsx-js-style'
  import XLSXS from "xlsx-js-style";

 
  const exportToExcel  = ()=>{
    // 创建一个新的工作簿
    const wb = XLSXS.utils.book_new();
    // sheet工作簿标题
    const sheetName = "xlsx导出带样式";
    // 创建数据行和样式
    let rowArray = [
      // 人才发展历程
      [{
        v: "人才发展历程",
        t: "s",
        s: {
          font: {
            name: "Courier",
            sz: 24,
            bold: true, 
            color:'b8ddb0'
          },
          fill: { fgColor: { rgb: '9e9e9e' } } 
        }
      }],
      [{
          v: "姓名",
          t: "s",
          s: {
            font: {
              name: "Courier",
              rgb: "E9E9E9"
            },
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "王大",
          t: "s",
          s: {
            font: {
              bold: true,
              color: {
                rgb: "FF0000"
              }
            }
          }
        },
        {
          v: "部门",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "管理服务部",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
        {
          v: "岗位",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "web全栈开发",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
      ],
      [{
          v: "入职时间",
          t: "s",
          s: {
            font: {
              name: "Courier",
              rgb: "E9E9E9"
            }
          }
        },
        {
          v: "2021.03.06",
          t: "s",
          s: {
            font: {
              bold: true,
              color: {
                rgb: "FF0000"
              }
            }
          }
        },
        {
          v: "司龄",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "8.5",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
        {
          v: "职级职等",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "P4",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
      ],
      [{
          v: "学历",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "本科",
          t: "s",
          s: {
            font: {
              bold: true,
              color: {
                rgb: "FF0000"
              }
            }
          }
        },
        {
          v: "毕业院校",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "南京科技大学苏州信息学院",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
        {
          v: "专业",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "畜牧养殖",
          t: "s",
          s: {
            alignment: {
              wrapText: true
            }
          }
        },
      ],
      [{
          v: "诗选之星",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "总计：2次",
          t: "s",
          s: {
            font: {
              bold: true,
              color: {
                rgb: "FF0000"
              }
            },
            width:80
          }
        },
      ],
      [{
          v: "半年绩效",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
        },
        {
          v: "A：1次，A：1次，A：1次，A：1次，A：1次",
          t: "s",
          s: {
            // r:0,
            // c:0,
            // e:{r:3,c:0},
            font: {
              bold: true,
              color: {
                rgb: "FF0000"
              },
            },
          }
        },
      ],
      // 工作经历（由近到远填写）
      [{
        v: "工作经历（由近到远填写）",
        t: "s",
        s: {
          r:0,
          c:4,
          font: {
            name: "Courier",
            sz: 24,
            bold: true, 
            color:'b8ddb0'
          },
          fill: { fgColor: { rgb: '9e9e9e' } } 
        }
      }],
      // 表头
      [{
          v: "起止年月",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "工作单位",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "工作单位",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "在职岗位",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      }
    
      ],
      // 公司荣誉
      [{
        v: "公司荣誉",
        t: "s",
        s: {
          r:0,
          c:4,
          font: {
            name: "Courier",
            sz: 24,
            bold: true, 
            color:'b8ddb0'
          },
          fill: { fgColor: { rgb: '9e9e9e' } } 
        }
      }],
      // 表头
      [{
          v: "时间",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "荣誉类型",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "入选原因",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },

      ],
      // 学习历程
      [{
        v: "学习历程",
        t: "s",
        s: {
          r:0,
          c:4,
          font: {
            name: "Courier",
            sz: 24,
            bold: true, 
            color:'b8ddb0'
          },
          fill: { fgColor: { rgb: '9e9e9e' } } 
        }
      }],
      // 表头
      [{
          v: "学习时间",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "学习方式",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "学习课程",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "学习课程",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "地点",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "考核分数",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },

      ],
      // 调薪记录
      [{
        v: "调薪记录",
        t: "s",
        s: {
          r:0,
          c:4,
          font: {
            name: "Courier",
            sz: 24,
            bold: true, 
            color:'b8ddb0'
          },
          fill: { fgColor: { rgb: '9e9e9e' } } 
        }
      }],
      // 表头
      [{
          v: "时间",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "职级职等",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "综合薪资",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "类型",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "调整原因",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      

      ],
      // 年度积分

      [{
          v: "时间",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "年度积分",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "年度积分",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "年度积分",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "年度建议",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "年度建议",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },

      ],
      [{
          v: "时间",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "意见",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "采纳数量",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "任务",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "提出数量",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },
      {
          v: "采纳数量",
          t: "s",
          s: {
            fill: {
              fgColor: {
                rgb: "E9E9E9"
              }
            }
          }
      },

      ],
    ];
    // 创建带有行的工作表;将工作表添加到工作簿
    const ws = XLSXS.utils.aoa_to_sheet(rowArray,{raw:true});
    XLSXS.utils.book_append_sheet(wb, ws, sheetName);
    //默认最大列数
    let maxColumnNumber = 1; 
    rowArray.map(item=>item.length>maxColumnNumber?maxColumnNumber=item.length:'');
    //合并  #将第一行标题列合并
    ws['!merges'] = [ 
      // 人才发展历程
      XLSXS.utils.decode_range('A1:F1'),
      XLSXS.utils.decode_range('B5:F5'),
      XLSXS.utils.decode_range('B6:F6'),
      // 工作经历
      XLSXS.utils.decode_range('A7:F7'),
      XLSXS.utils.decode_range('A8:B8'),
      XLSXS.utils.decode_range('C8:D8'),
      XLSXS.utils.decode_range('E8:F8'),
      // 公司荣誉
      XLSXS.utils.decode_range('A9:F9'),
      XLSXS.utils.decode_range('C10:F10'),
      // 学习历程
      XLSXS.utils.decode_range('A11:F11'),
      XLSXS.utils.decode_range('C12:D12'),
      // 调薪历程
      XLSXS.utils.decode_range('A13:F13'),
      XLSXS.utils.decode_range('E14:F14'),
      // 年度积分
      XLSXS.utils.decode_range('A15:A16'),
      XLSXS.utils.decode_range('B15:D15'),
      XLSXS.utils.decode_range('E15:F15'),
    ];
    console.log(ws);
    //边框样式
    let borderStyle = {
      top: {
        style: "thin",
        color: {
          rgb: "000000"
        }
      },
      bottom: {
        style: "thin",
        color: {
          rgb: "000000"
        }
      },
      left: {
        style: "thin",
        color: {
          rgb: "000000"
        }
      },
      right: {
        style: "thin",
        color: {
          rgb: "000000"
        }
      }
    }
    //添加外边框
    rowArray.map((item,index)=>{
        for(let i=1;i<=maxColumnNumber;i++){
          if(!ws[''+String.fromCharCode(64 + parseInt(i))+(index+1)]){
            ws[''+String.fromCharCode(64 + parseInt(i))+(index+1)] = {v:'',t:'s',s:{border:borderStyle}};
            continue ;
          }
          //边框
          ws[''+String.fromCharCode(64 + parseInt(i))+(index+1)].s.border = borderStyle;

          //字体居中
          ws[''+String.fromCharCode(64 + parseInt(i))+(index+1)].s.alignment = { vertical: 'center', horizontal: 'center' } 
        }
    })
    //添加列宽
    ws['!cols'] = ([{
      width: 20
    }, {
      width: 20
    }, {
      width: 20
    }, {
      width: 20
    }, {
      width: 20
    }, {
      width: 20
    }
  ]);
    //添加行高
    ws['!rows'] = [
      { 'hpt': 40 }, 
      { 'hpt': 40 }, 
      { 'hpt': 40 }, 
      { 'hpt': 40 }, 
      { 'hpt': 40 }, 
      { 'hpt': 40 }, 
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
      { 'hpt': 40 },
    ];
    // 将Excel文件写入浏览器  #导出
    XLSXS.writeFile(wb, sheetName+".xlsx");
  }
</script>

南极的北极熊在冬泳
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue中导出Excel表格的实现代码
10-17
项目中我们可能会碰到导出Excel文件的需求，这篇文章主要介绍了vue中导出Excel表格的实现代码，非常具有实用价值，需要的朋友可以参考下
vue+element表格导出为Excel文件
10-16
主要为大家详细介绍了vue+element表格导出为Excel文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue：功能【xlsx】动态行内合并
最新发布
1363648943的专栏
03-14 718
在代码中，使用了一个名为 sheet1 的对象来定义表格的名称、数据、合并单元格和行高等信息。4、最后，通过调用 OutExcelSheet.exportSheetExcel 函数，并传递以上参数，将生成的 Excel 文件导出到本地。注）生成的excel封装的方法如下（支持表头合并、导出的 excel 支持生成多个sheet工作表、表格可自适应宽度、自适应高度、合并表格）2、前端代码，导出，用的mock数据，是转换后的二维数组，封装的方法中有写。场景：纯前端导出excel数据，涉及到列合并、行合并。
Vue实现导出excel表格功能
08-27
主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
VUE导出Excel文件.rar
06-02
VUE导出Excel文件，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等。 https://www.cnblogs.com/yinxingen/p/11052184.html
Vue实现数据表格合并列rowspan效果
10-16
主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 导出Excel表格，并实现合并单元格方法
weixin_44523517的博客
08-03 5683
Vue 导出Excel表格，并实现合并单元格方法
vue把数据导出为Excel表格(合并单元格，修改样式)
rain_pen的博客
06-29 2371
const merges = ['A1:A2', 'B1:B2', 'C1:E1'] // 合并单元格的数据，如何合并参考上面图片讲解。multiHeader = [], // 第一行表头。multiHeader = [], // 第一行表头。const multiHeader = ['', '', '测试3', '测试4', '测试5']const multiHeader2 = ['测试1', '测试2', '测试', '', '']horizontal: 'center',//水平居中。
Vue 动态实现合并table表格多列多行
hylshyshm的博客
09-26 1747
官网网址：https://element.eleme.cn/#/zh-CN/component/table
vue中使用excelJs导出excel
成在坚持，贵在坚持
11-25 1578
使用ExcelJs组件，自定义导出excel内容
vue组件 导出excel,并且可以合并单元格，设置宽度，字体颜色，换行等
qq_40247562的博客
07-17 1202
需求：在开发后台管理系统中，经常会有导出表格的需求，本案例实现了在导出时，可以合并单元格，设置单元格字体颜色和宽度，插件：xlsx（0.18.4），xlsx-style（0.8.13），file-saver（2.0.5）
复杂多表头excel表格的导出及布局，支持拓展
02-22
1.用于多种业务的复杂多表头表格 2.可支持任意拓展表头后导出 3.简单易懂
vue三种方式导出报表至excel
热门推荐
weixin_42375707的博客
07-01 1万+
vue三种方式导出报表至excel
在vue.js中如何导出Excel表格
dt1991524的博客
01-11 2146
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 1. 安装依赖 //npm npm install -S file-saver xlsx npm install -D script-loader 或者 //yarn yarn add file-saver yarn add xlsx yarn add script-loa...
vue 使用XLSX导出表格合并
weixin_44467587的博客
05-19 881
【代码】vue 使用XLSX导出表格合并。
Vue导出Excel的实现方法与原理
我们好像在哪见过
07-17 1万+
本文将详细介绍前端Vue中导出Excel的方法，包括使用第三方库和纯前端实现两种方式。同时解释其原理，帮助读者了解如何在Vue项目中高效地导出Excel文件。
vue导出数据为excel表格及合并单元格
weixin_51666715的博客
08-31 1905
前端vuetable数据以excel表格形式导出,并实现单元格合并
在Vue中，将数据导出成excel,合并单元格
一捆铁树枝的博客
01-20 1万+
前段时间接到一个做报表的项目，需要将数据导出成excel表格，表格模板中有很多表格是需要合并的，之前没有这方面的经验，也为难了好久，后来终于发现一个好用的js插件，完全能够实现我需要的功能，一块分享给大家； 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格...
vue2 element-ui form表单多行多列
yawhom的博客
03-23 772
【代码】vue2 element-ui form表单多行多列。
vue3导出excel表格合并第一列前两行
06-01
要实现导出excel表格并合并第一列前两行，可以使用ExcelJS库进行操作。以下是实现的大致步骤： 1. 安装ExcelJS库 ``` npm install exceljs --save ``` 2. 导入ExcelJS库并创建工作簿和工作表 ``` import ExcelJS from 'exceljs'; const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); ``` 3. 向工作表中添加数据 ``` worksheet.addRow(['合并的单元格', '第二列', '第三列']); worksheet.addRow(['', '第二行', '第三行']); worksheet.addRow(['', '第三行', '第三行']); worksheet.addRow(['不合并的单元格', '第二列', '第三列']); ``` 4. 合并单元格 ``` worksheet.mergeCells('A1:A2'); // 合并A1和A2单元格 ``` 5. 导出Excel文件 ``` workbook.xlsx.writeBuffer().then((buffer) => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'filename.xlsx'; link.click(); }); ``` 注意：以上代码只是实现的大致步骤，具体的细节需要根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值