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, '导出后的文件名')
    },
相关推荐
学习星球27 分钟前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
YuJie2 小时前
JSBridge 基础知识
前端·javascript
默_笙2 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript
爱勇宝2 小时前
客户只想看个页面,我却做了一个静态演示发布系统
前端·javascript·后端
Python私教5 小时前
Excel 和群聊什么时候该升级成管理系统?7 个判断信号
excel·管理系统·权限设计
界面开发小八哥6 小时前
界面控件DevExpress Blazor v26.1新版亮点 - Navigation(导航)
javascript·.net·界面控件·blazor·devexpress·ui开发
AI英德西牛仔7 小时前
Claude导出word指令的PC端最优解:AI导出鸭电脑版底层逻辑全拆解
人工智能·word·excel·deepseek·ai导出鸭
SendTomo7 小时前
send.wang(私传网)基于网页P2P直连传输大文件的优势
javascript·网络·webrtc·html5·p2p
toooooop87 小时前
踩坑:PHP7.2导出Excel正常,升级7.3文件损坏需修复
android·excel
AI英德西牛仔8 小时前
Gemini 导出 word 指令 时代,PC 端 AI 工作流的最后一块拼图:AI 导出鸭电脑版深度拆解
人工智能·word·excel·deepseek·ai导出鸭