<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
相关推荐
A黄俊辉A2 天前
uniapp webview中实现 app和内嵌的H5双向通信三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘李少兄2 天前
JavaScript 隐式全局变量解析honkun62 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询kybs19912 天前
全球灾害数据分析可视化 毕业设计-附源码66794雪芽蓝域zzs2 天前
第26章:ECharts 自定义主题 + 页面一键切换主题(深色 / 浅色两套)雪芽蓝域zzs2 天前
第22章:ECharts 图表联动(多图表交互联动)daols882 天前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载雪芽蓝域zzs2 天前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip