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, '导出后的文件名')
    },
相关推荐
袁煦丞 cpolar内网穿透实验室3 分钟前
无需公网 IP 也能全球访问本地服务?cpolar+Spring Boot+Vue应用实践!
vue.js·spring boot·tcp/ip·远程工作·内网穿透·cpolar
浩泽学编程7 分钟前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js
狗哥哥9 分钟前
Vue 3 插件系统重构实战:从过度设计到精简高效
前端·vue.js·架构
jenemy14 分钟前
🚀 这个 ElDialog 封装方案,让我的代码量减少了 80%
vue.js·element
幽络源小助理16 分钟前
SpringBoot+Vue雅苑小区管理系统源码 | Java物业项目免费下载 – 幽络源
java·vue.js·spring boot
谁是听故事的人27 分钟前
vue前端面试指南
前端·vue.js·面试
千寻girling32 分钟前
面试官: “ 请你讲一下 package.json 文件 ? ”
前端·javascript·面试
如果你好35 分钟前
解决深拷贝循环引用痛点:一篇看懂 WeakMap 实现方案
前端·javascript
han_38 分钟前
前端性能优化之性能指标篇
前端·javascript·性能优化
爱生活的苏苏38 分钟前
修改默认滚动条样式
开发语言·javascript·ecmascript