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

摸爬滚打小菜鸟

已于 2022-03-20 13:40:51 修改

阅读量1.3w

点赞数 5

文章标签： vue.js javascript 前端

于 2021-10-27 10:14:21 首次发布

本文链接：https://blog.csdn.net/weixin_43144209/article/details/120986689

版权

本文档介绍了如何在Vue项目中使用js-table2excel插件导出包含文字和图片的Excel表格，并展示了如何修改源码添加合并单元格功能。通过安装插件、引入、使用以及展示代码实现过程，详细解释了整个流程，最终实现了带有照片和合并单元格的Excel表格导出。

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

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