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截图如下

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

POI Excel复制行（支持复制样式、合并单元格、形状）
目录 1 Maven依赖 2 实现代码 3 调试代码 4 模板内容 5 调试结果注: 1 Maven依赖 <depe ...
JAVA 浏览器下载excel，自定义样式：合并单元格，设置多种背景填充颜色，冻结窗格
添加依赖: <dependency><groupId>org.apache.poi</groupId><artifactI ...
javaweb使用poi下载excel设置样式、合并单元格、设置列宽
@Overridepublic void exportMajorInfo(@RequestBody StudentInfoDto studentInfoDto) {// 至少存在4列int miniC ...
phpexcel导出大量数据合并单元格_PHPExcel处理一个单元格内多条数据拆分成多个单元格多条数据...
日期: 2020年6月17日分类: PHP Tags: Excel 阅读量: 1,221 一.描述需求如图,当我们遇到一条数据中,某一项内容有多条数据,为了方便文档查阅,我们需要在那一项数据进行拆 ...
学习Python处理Excel 难度1级别多表合并、数据透视表、拆分合并单元格并获得一维表
#本代码要点:多表合并.数据透视表.拆分合并单元格并获得一维表 #主题:各门店合并,计算各店当月回店做服务2次+的客人数量 #EXCEL工作表:存在合并单元格 #备注: import pandas a ...
个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格，取消合并单元格并填充内容...
在高级Excel用户群体中无比痛恨的合并单元格,在现实的表格中却阴魂不散的纠缠不断.今天Excel催化剂也来成为"帮凶",制造更多的合并单元格.虽然开发出此功能,请使用过程中务必要 ...
poi excel导入判断合并单元格_Excel合并单元格，你需要知道的那些事
合并单元格,是我们经常使用的一个功能.借助合并单元格功能,我们可以制作跨列表头,可以对数据进行显示上的分类,使数据看起来更加清晰明了,让我们的Excel表格看起来更加专业. 找到菜单栏的合并单元格功能 ...
Python操作高版本Excel文件：颜色、边框、合并单元格
本文主要颜色Python扩展库openpyxl的一些基本用法,包括创建工作簿.选择活动工作表.写入单元格数据,设置单元格字体颜色.边框样式,合并单元格等等. from random import ra ...
php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码，ONE 已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 ...

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

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

最新文章

热门文章