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, '导出后的文件名')
    },
相关推荐
涵涵(互关)1 小时前
GoView各项目文件中的相关语法2
前端·javascript·vue.js
子兮曰1 小时前
别让爬虫白嫖你的导航站了:纯免费,手把手实现加密字体防爬
前端·javascript·后端
CircleMouse2 小时前
如何设置wps单元格下拉选项设置
excel·wps
焰火19992 小时前
[Vue]可重置的响应式状态reactive
前端·vue.js
源码宝2 小时前
基于 SpringBoot + Vue 的医院随访系统:技术架构与功能实现
java·vue.js·spring boot·架构·源码·随访系统·随访管理
昇腾CANN2 小时前
TileLang-Ascend 算子性能优化方法与实操
开发语言·javascript·性能优化·昇腾·cann
老王以为2 小时前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js
web打印社区2 小时前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
蜡台3 小时前
H5使用Chrome 权限问题
前端·javascript·chrome
大貔貅喝啤酒3 小时前
接口测试_Postman(详细版)
javascript·测试工具·node.js·自动化·postman