如想要实现导出功能,并且可以导出图片,如下图效果:
下面直接上步骤:
下载安装插件:
安装命令:npm install js-table2excel
引入插件:
import table2excel from 'js-table2excel'
使用插件
直接上代码:
onBatchExport方法中数据的key值要与data中保持一致,否则数据无法获取到,打印出的结果就回为undefined。
<template>
<div>
<el-button @click="onBatchExport">导出</el-button>
</div>
</template>
<script setup lang="ts">
import table2excel from 'js-table2excel'
// 导出表格 按钮点击后触发事件
const onBatchExport = () => {
const column = [
{
title: '二维码id',
key: 'id',
type: 'text',
},
{
title: '景区名称',
key: 'sciencename',
type: 'text',
},
{
title: '二维码',
key: 'code',
type: 'image',
width: 150,
height: 150,
},
{
title: '创建时间',
key: 'time',
type: 'text',
},
]
const tableDatas = JSON.parse(JSON.stringify(content.value))//这里面填写你接口的数据
const datas = tableDatas
table2excel(column, datas, '二维码')
}
</script>