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, '导出后的文件名')
    },
相关推荐
蜡台8 分钟前
IDEA LiveTemplates Vue ElementUI
前端·vue.js·elementui·idea·livetemplates
苏瞳儿14 分钟前
前端/后端-配置跨域
前端·javascript·node.js·vue
神の愛19 分钟前
Vite的proxy和Nginx的location 请求转发区别
vue.js
竹林81819 分钟前
从轮询到订阅:我在 React 项目中实现实时监听 ERC-20 转账事件的完整踩坑记录
前端·javascript
视觉CG30 分钟前
【tailwindcss】网页标题样式
javascript·ecmascript·tailwindcss
之歆31 分钟前
Vue Router 深度解析 — 从浏览器导航模型到 SPA 路由工程
前端·javascript·vue.js
guojb82432 分钟前
Vue3 高阶技巧:使用 AST 将 HTML 字符串优雅渲染为自定义组件
前端·javascript·vue.js
之歆37 分钟前
API 层架构设计 — 从 RESTful 到 GraphQL 的范式演进
vue.js·后端·restful·graphql
程序员库里1 小时前
第 3 章:Tiptap 与 React 集成
前端·javascript·面试
Moment1 小时前
AI全栈入门指南:使用 NestJs 创建第一个后端项目
前端·javascript·后端