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, '导出后的文件名')
    },
相关推荐
Jacky19995 小时前
Electron + Vue 3 桌面打字游戏实战:从 VSCode 扩展到独立应用的架构改造
javascript
用户50093768390395 小时前
热敏小票 Web 打印:我在 58/80mm 上折腾的两周
前端·vue.js
柚yuzumi6 小时前
别再猜 this:先看它属于谁,再看它指向谁
前端·javascript
汉堡大王95277 小时前
面试必考:手写代码 new 做了什么?从原理到实现全解析
前端·javascript·面试
BillKu7 小时前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript
顶级自由人9 小时前
本地正常、线上正常,为什么一个 Hook 仍会报错?
前端·javascript·程序员
lerhxx9 小时前
R3F 第一人称漫游与碰撞检测:Pointer Lock + 不穿墙的滑墙秘诀(中)
前端·javascript·three.js
labixiong9 小时前
button按钮原生开关弹窗,零 JS 搞定80%交互场景
前端·javascript·html
隔岸观火烧连营9 小时前
如何用 WebCodecs 在浏览器里实现高清录屏 —— 无插件、无水印、直接导出 MP4
前端·javascript
一晌小贪欢10 小时前
python-第15天:Python 列表推导式
开发语言·python·excel·数据可视化·python办公