<el-button
type="warning"
icon="el-icon-download"
size="small"
@click="onBatchExport"
>
导出
</el-button>
安装插件
npm install js-table2excel
导入插件
import table2excel from 'js-table2excel'
data(){
return {
listDatanew: []
}
}
// 导出事件 datas是接口返回的数据
onBatchExport() {
const column = [
{
title: '姓名',
key: 'name',
type: 'text'
},
{
title: '年龄',
key: 'age',
type: 'text'
},
{
title: '巡检时间',
key: 'XJDATE',
type: 'text'
},
{
title: '问题描述',
key: 'PROBLEM',
type: 'text'
},
{
title: '图片1',
key: 'IMG1',
type: 'image',
width: 50,
height: 50
},
{
title: '图片2',
key: 'IMG2',
type: 'image',
width: 50,
height: 50
},
]
let tableDatas = JSON.parse(JSON.stringify(this.listDatanew))
let datas = tableDatas;
table2excel(column, datas, '导出后的文件名')
},
vue table表格导出图片到Excel
ratel️2023-11-04 12:21
相关推荐
计算机毕设VX:Fegn08956 分钟前
计算机毕业设计|基于springboot + vue图书商城系统(源码+数据库+文档)哆啦A梦158824 分钟前
商城后台管理系统 03 登录布局曼巴UE51 小时前
UE FString, FName ,FText 三者转换,再次学习,官方文档理解selt7911 小时前
Redisson之RedissonLock源码完全解析行走的陀螺仪2 小时前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)一颗不甘坠落的流星2 小时前
【Antd】基于 Upload 组件,导入Json文件并转换为Json数据LYFlied2 小时前
Vue2 与 Vue3 虚拟DOM更新原理深度解析小飞侠在吗3 小时前
vue shallowRef 与 shallowReacitiveGISer_Jing3 小时前
WebGL实例化渲染:性能提升策略Gomiko4 小时前
JavaScript进阶(四):DOM监听