最近项目遇到了一个需求，在后台将学生信息以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截图如下