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, '导出后的文件名')
    },
相关推荐
全栈前端老曹7 分钟前
【前端地图】地图开发基础概念——地图服务类型(矢量图、卫星图、地形图)、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介
前端·javascript·地图·wgs84·gcj-02·bd09·地图sdk
Fairy要carry1 小时前
项目01-手搓Agent之loop
前端·javascript·python
kyriewen1 小时前
DOM树与节点操作:用JS给网页“动手术”
前端·javascript·面试
米饭同学i1 小时前
基于腾讯云COS的小程序素材上传功能实现
前端·javascript·react.js
光影少年1 小时前
如何开发一个CLI工具?
javascript·测试工具·前端框架·node.js
哈__1 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-fingerprint-scanner
javascript·react native·react.js
晴栀ay1 小时前
Generator + RxJS 重构 LLM 流式输出的“丝滑”架构
javascript·后端·llm
我是伪码农2 小时前
14届蓝桥杯
javascript·css·css3
装不满的克莱因瓶3 小时前
React Native vs Flutter:一次深入到底的性能对比分析(含原理 + 实战)
javascript·flutter·react native·react.js·app·移动端
gCode Teacher 格码致知3 小时前
Javascript及Python提高:将对象的键值对转换为数组元素的方式以及两种语言的对比-由Deepseek产生
javascript·python