如想要实现导出功能,并且可以导出图片,如下图效果:
下面直接上步骤:
下载安装插件:
安装命令: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>