vue 借助插件js-table2excel 实现导出excel，并导出图片到excel。

本文主要是介绍vue 借助插件js-table2excel 实现导出excel，并导出图片到excel。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、界面展示

![![在这里插入图片描述](https://img-blog.csdnimg.cn/5445e013d78b47b4b1b4a38d38095933.png](https://img-blog.csdnimg.cn/4f46373a20d74f28bc93a9b989cb1b8f.png

二、excel展示

在这里插入图片描述

三、工具：table2excel

安装插件

yarn add js-table2excel

2.代码实现

<template><div class="box"><a-button @click="exportFn">导出</a-button><vxe-table :data="tableData"><vxe-column type="seq"></vxe-column><vxe-column field="date" title="日期"></vxe-column><vxe-column field="num" title="数量"></vxe-column><vxe-column field="photo" title="头像" ><template #default="{ row }"><img :src="row.photo" alt="" style="height:50px"></template></vxe-column></vxe-table></div>
</template><script>
const originData = [{date: '2022年10月1日',num: 2,photo:'此处为base64格式图片,字符长度大不展示。'},{date: '2022年10月2日',num: 6,photo:'此处为base64格式图片,字符长度大不展示。'},{date: '2022年10月3日',num: 4,photo:'此处为base64格式图片,字符长度大不展示。'}
]
import table2excel from 'js-table2excel'export default {data() {return {tableData: originData,}},methods: {exportFn() {let temp = [{title: '日期',key: 'date',type: 'text'},{title: '数量',key: 'num',type: 'text'},{title: '头像', // 输出 excel 列名key: 'photo', // 表格对应列字段名type: 'image' // 列类型}]let datas = this.tableData // 表格数据let excelName = '数据' // excel 文件名table2excel(temp, datas, excelName) }}}
</script>