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, '导出后的文件名')
    },
相关推荐
A_nanda8 分钟前
vue快速学习框架
前端·javascript·vue.js·学习·c#
蜗牛攻城狮8 分钟前
“直接 URL 下载” vs “前端 Blob 下载”:原理、区别与最佳实践
前端·javascript·二进制流
爱上妖精的尾巴14 分钟前
7-16 WPS JS宏 RandBetween、Address实例8--[唯一性]类的应用
开发语言·javascript·wps·js宏·jsa
世洋Blog15 分钟前
H5游戏-Canvas绘制与JS基础
javascript·游戏·h5·canvas
刘一说21 分钟前
Pinia状态持久化的“隐形陷阱“:为什么页面刷新后状态丢失?
前端·javascript·vue.js
摘星编程38 分钟前
OpenHarmony环境下React Native:自定义useDarkMode深色模式
javascript·react native·react.js
摘星编程41 分钟前
用React Native开发OpenHarmony应用:自定义useNumberFormat数字格式化
javascript·react native·react.js
那些免费的砖1 小时前
Uni ECharts - 基于 ECharts 开发的 uni-app 跨端图表解决方案,和 Vue ECharts 用法几乎一致
vue.js·uni-app·echarts
摘星编程1 小时前
用React Native开发OpenHarmony应用:自定义useCSS类名操作
javascript·react native·react.js
小马_xiaoen1 小时前
Vue3 + TS 实现长按指令 v-longPress:优雅解决移动端/PC端长按交互需求
前端·javascript·vue.js·typescript