一、前言

1、前端页面

2、导出效果

二、准备工作

1、添加表格

2、绑定数据

3、注册事件

三、实现过程

1、安装依赖

2、页面引入

3、方法说明

4、导出方法

 四、完整代码

一、前言

记录一下，在前端实现导出el-table表格，带有图片文件；

1、前端页面

2、导出效果

、

二、准备工作

1、添加表格

在页面上添加一个el-table组件，用来展示数据；

2、绑定数据

给el-table绑定数据源；注意：这边采用的是网络图片，也可以是后端返回的图片；

// el-table的数据源 const tableData = ref([   {     name: "AAAAA",     age: 18,     avatar: "https://element-plus.org/images/element-plus-logo.svg"   },   {     name: "BBBBB",     age: 20,     avatar: "https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png"   }, ]);

绑定好之后，我们可以看到页面上的数据展示情况；

3、注册事件

接下来，页面上添加一个导出按钮，用来出发导出excel的事件；

导出Excel

// 导出按钮的回调函数 function exportExcelFn() {     // ...... }

三、实现过程

1、安装依赖

终端输入下列代码，安装js-table2excel依赖包，用于导出带有图片的excel；

npm i js-table2excel --save

2、页面引入

import table2excel from "js-table2excel";

3、方法说明

table2excel(column， data， title， header)，该方法用于导出数据，并直接触发浏览器的下载功能；可以传入四个参数；

参数一：column，数组；

指定数据列的格式；colunm中的元素为每个列的指定格式，包含：

• title：列名，要显示在excel中的列名称；
• key：对应数据源中每条数据对象的key；
• type：值类型，可指定“text、image”；
• width：指定该列单元格的宽度；
• height：指定该列单元格的高度；

const column = [     {         title: "Name",         key: "name",         type: "text",     },     {         title: "Age",         key: "age",         type: "text",     },     {         title: "Avatar",         key: "avatar",         type: "image",         width: 150,     }, ];

参数二：data，数组；指定导出的数据源；也就是前面el-table中绑定的数据源；

参数三：title，字符串；指定导出excel的文件名；

参数四：header，文本；指定导出工作表的表头信息；

4、导出方法

// 导出按钮的回调函数 function exportExcelFn() {   const column = [     {       title: "Name",       key: "name",       type: "text",     },     {       title: "Age",       key: "age",       type: "text",     },     {       title: "Avatar",       key: "avatar",       type: "image",       width: 150,     },   ];   table2excel( column, tableData.value, `用户列表${dateNum()}`, "表头：用户列表" ); }

 四、完整代码

==================================================================== 

这次的记录比较粗糙，还有一些未解决的问题，后续再补充完善吧~

走过路的大佬们，还请多多指点！！