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, '导出后的文件名')
    },
相关推荐
J_liaty2 分钟前
Vue2 从入门到精通
前端·javascript·vue.js
张元清18 分钟前
在 React 中构建沉浸式 Web 应用:全屏、屏幕常亮与系统通知
前端·javascript·面试
王霸天20 分钟前
💥大屏卡成 PPT?这 3 个性能优化招数亲测有效
前端·vue.js·数据可视化
ahhdfjfdf21 分钟前
微信H5 页面定位权限处理
前端·javascript
蓝黑202025 分钟前
Vue组件通信之emit
前端·javascript·vue
kyriewen25 分钟前
线上Bug炸了,用户骂你你却不知道?前端监控教你“远程开天眼”
前端·javascript·监控
kisloy1 小时前
【反爬虫】极验4 W参数逆向分析
java·javascript·爬虫
夏雪之晶莹1 小时前
JSON语法结构
javascript
吴声子夜歌1 小时前
Vue3——v-for指令
前端·javascript·vue
音仔小瓜皮1 小时前
【Vue】什么时候用Ref?什么时候用shallowRef?
前端·javascript·vue.js