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, '导出后的文件名')
    },
相关推荐
阿蒙Amon25 分钟前
JavaScript学习笔记:13.Promise
javascript·笔记·学习
小小心LOVE29 分钟前
Vue3 安装和使用 vue-office来实现 Word、Excel 和 PDF 文件的预览
vue.js·word·excel
June bug31 分钟前
【Vue】从0开始使用Vue构建界面
前端·vue.js·前端框架
爱吃大芒果31 分钟前
Flutter 动画实战:隐式动画、显式动画与自定义动画控制器
开发语言·javascript·flutter·ecmascript·gitcode
shuaijie051832 分钟前
在Vue.js中实现列表的拖动功能,使用第三方库如vuedraggable(基于Sortable.js)
android·javascript·vue.js
风月歌33 分钟前
小程序项目之驾校报名小程序源代码(java+vue+小程序+mysql)
java·vue.js·mysql·小程序·毕业设计·源码
kesteler43 分钟前
v-model的使用
前端·javascript·vue.js
cyhysr1 小时前
oracle的model子句让sql像excel一样灵活2
sql·oracle·excel
果壳~1 小时前
【前端】【canvas】【pixi.js】水波纹滤镜实现教程 - 支持随机波动与鼠标交互
前端·javascript
han_1 小时前
手把手教你写一个VSCode插件,从开发到发布全流程
前端·javascript·visual studio code