vue table表格导出图片到Excel

复制代码
<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, '导出后的文件名')
    },
相关推荐
skywalk81636 分钟前
Kotti Next:使用FastAPI+Vue 3构建的现代无头CMS-Kotti CMS的精神继承者(使用WorkBuddy AI自动编程)
前端·vue.js·人工智能·fastapi·kotti
happymaker06269 分钟前
vue的基本使用和指令
前端·javascript·vue.js
英俊潇洒美少年15 分钟前
Vue3 为什么不做 Fiber / 并发渲染?
前端·javascript·vue.js
小小亮018 小时前
Next.js基础
开发语言·前端·javascript
华洛9 小时前
我用AI做了一个48秒的真人精品漫剧,不难也不贵
前端·javascript·后端
Amumu121389 小时前
Js:正则表达式(二)
开发语言·javascript·正则表达式
Sgf22710 小时前
ES8(ES2017)新特性完整指南
开发语言·javascript·ecmascript
Cobyte12 小时前
1.基于依赖追踪和触发的响应式系统的本质
前端·javascript·vue.js
老神在在00112 小时前
【Selenium 自动化精讲】浏览器弹窗与登录界面的本质区别 & 实操指南
javascript·学习·selenium·测试工具·自动化
计算机学姐13 小时前
基于SpringBoot的咖啡店管理系统【个性化推荐+数据可视化统计+配送信息】
java·vue.js·spring boot·后端·mysql·信息可视化·tomcat