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, '导出后的文件名')
    },
相关推荐
胖虎2658 小时前
Vue3 多入口项目实战:如何优雅管理多个独立业务模块
vue.js
小杨梅君8 小时前
探索现代 CSS 色彩:从 HSL 到 OKLCH,打造动态色阶
前端·javascript·css
刺客_Andy8 小时前
React 第五十一节 Router中useOutletContext的使用详解及注意事项
前端·javascript·react.js
你说啥名字好呢8 小时前
【React Fiber的重要属性】
javascript·react.js·ecmascript
三年三月9 小时前
自建HTTPS证书
前端·javascript
木易士心9 小时前
如何优化v-if和v-for的性能?
前端·javascript
三年三月9 小时前
浏览器地址栏回车 vs 点击刷新按钮的缓存行为差异分析
前端·javascript
小左OvO10 小时前
基于百度地图JSAPI Three的城市公交客流可视化(二)——区域客流
前端·javascript·vue.js
小左OvO10 小时前
基于百度地图JSAPI Three的城市公交客流可视化(三)——实时公交
前端·javascript·vue.js
qiao若huan喜10 小时前
6、webgl 基本概念 + 四边形纹理
前端·javascript·信息可视化·webgl