<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
相关推荐
默_笙14 小时前
🚲 从写信到打电话:WebSocket 双工通信与跨域方案的"通信进化史"ikoala14 小时前
DeepSeek 官方仓库惊现 DeepSeek Harness 桌面端!liangshanbo121515 小时前
React useEffect 与 useLayoutEffect 面试题整理Bs_MoneyMagnet15 小时前
基于springboot+vue的旅游景区点评系统的设计与实现 源码+文档ID346107442015 小时前
【课程设计】基于Spring Boot+Vue的校园共享无人机服务系统设计与实现-计算机毕设 附源码44219夜不会漫长15 小时前
C++:类和对象(2)BillKu16 小时前
Vue3 可拖拽分栏布局:两种实现方式详解雪芽蓝域zzs17 小时前
第三十七节:防抖、节流封装(composables 通用函数,搜索框防重复请求)十年一梦惊觉醒17 小时前
快手视频发布助手,全自动视频发布带货工具超人气王17 小时前
细说agent心跳机制--agentLoop循环机制中死循环处理,带你进一步了解agent工作底层原理