vue使用js-table2excel将数据导出Excel表格 含文字 图片类型 设置表格样式/添加合并单元格

最近项目遇到了一个需求，在后台将学生信息以Excel表格导出，学生信息包含姓名、联系电话、照片等信息，一般情况下信息导出只需要导出字符串类型，但是现在的导出内容包含了图片，于是百度看到了js-table2excel可以导出图片，下面记录一下怎么在vue项目中使用js-table2excel导出带有文字、图片类型的excel表格。

1.安装js-table2excel

npm install js-table2excel

2.在需要用到的地方引入插件

import table2excel from 'js-table2excel'

3.在文件中使用

<el-table :data="studentList" ref="myTable" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="fullName" label="姓名" width="100"></el-table-column><!-- 此处省略... --></el-table>

//js 部分var column = [];this.$refs['myTable'].$children.forEach(element => {if(element.label && element.label!='操作') {let temp = {title: element.label,key: element.prop, //key值对应表单数据字段名称type: 'text',}if(temp.title=='照片') {temp.type = 'image';temp.key = 'photo';temp.width= 75,temp.height= 100}column.push(temp)}});var datas = this.multipleSelection; //表单数据const excelName = '学生信息_'+ new Date().toLocaleString() //文件名称table2excel(column, datas, excelName) //生成Excel表格，自动下载

4.导出成功截图如下

但是我还想给表格顶部添加一行合并单元怎么弄呢？查看了源码，发现源码并没有实现合并单元的代码，于是乎本小菜鸟决定动手在顶部加个合并单元格。

上代码(ps: 源码路径：node_modules/js-table2excel/index.js)

修改源码并保存（修改表格样式也是直接在源码添加样式就好....简单粗暴>_<）

....

在文件中使用

导出excel截图如下