vue3 使用element表格导出excel表格(带图片)

简介: vue3 使用element表格导出excel表格(带图片)

 如想要实现导出功能,并且可以导出图片,如下图效果:

        下面直接上步骤:

下载安装插件:

   安装命令:npm install js-table2excel

引入插件:

import table2excel from 'js-table2excel'

使用插件    

       直接上代码:

       onBatchExport方法中数据的key值要与data中保持一致,否则数据无法获取到,打印出的结果就回为undefined。

<template>
  <div>
    <el-button @click="onBatchExport">导出</el-button>
  </div>
</template>
<script setup lang="ts">
import table2excel from 'js-table2excel'
// 导出表格  按钮点击后触发事件
const onBatchExport = () => {
  const column = [
    {
      title: '二维码id',
      key: 'id',
      type: 'text',
    },
    {
      title: '景区名称',
      key: 'sciencename',
      type: 'text',
    },
    {
      title: '二维码',
      key: 'code',
      type: 'image',
      width: 150,
      height: 150,
    },
    {
      title: '创建时间',
      key: 'time',
      type: 'text',
    },
  ]
  const tableDatas = JSON.parse(JSON.stringify(content.value))//这里面填写你接口的数据
  const datas = tableDatas
  table2excel(column, datas, '二维码')
}
</script>
目录
打赏
0
0
0
0
1
分享
相关文章
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
546 8
记录一次NPOI库导出Excel遇到的小问题解决方案
【11月更文挑战第16天】本文记录了使用 NPOI 库导出 Excel 过程中遇到的三个主要问题及其解决方案:单元格数据格式错误、日期格式不正确以及合并单元格边框缺失。通过自定义单元格样式、设置数据格式和手动添加边框,有效解决了这些问题,提升了导出文件的质量和用户体验。
614 3
|
8月前
|
实现Excel文件和其他文件导出为压缩包,并导入
实现Excel文件和其他文件导出为压缩包,并导入
153 1
|
8月前
|
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
614 4
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
1120 10
网安工程师必看!AiPy解决fscan扫描数据整理难题—多种信息快速分拣+Excel结构化存储方案
作为一名安全测试工程师,分析fscan扫描结果曾是繁琐的手动活:从海量日志中提取开放端口、漏洞信息和主机数据,耗时又易错。但现在,借助AiPy开发的GUI解析工具,只需喝杯奶茶的时间,即可将[PORT]、[SERVICE]、[VULN]、[HOST]等关键信息智能分类,并生成三份清晰的Excel报表。告别手动整理,大幅提升效率!在安全行业,工具党正碾压手动党。掌握AiPy,把时间留给真正的攻防实战!官网链接:https://www.aipyaipy.com,解锁更多用法!
自动化数据处理:使用Selenium与Excel打造的数据爬取管道
本文介绍了一种使用Selenium和Excel结合代理IP技术从WIPO品牌数据库(branddb.wipo.int)自动化爬取专利信息的方法。通过Selenium模拟用户操作,处理JavaScript动态加载页面,利用代理IP避免IP封禁,确保数据爬取稳定性和隐私性。爬取的数据将存储在Excel中,便于后续分析。此外,文章还详细介绍了Selenium的基本设置、代理IP配置及使用技巧,并探讨了未来可能采用的更多防反爬策略,以提升爬虫效率和稳定性。
514 4
从Excel到Hadoop:数据规模的进化之路
从Excel到Hadoop:数据规模的进化之路
95 10
不通过navicat工具怎么把查询数据导出到excel表中
不通过navicat工具怎么把查询数据导出到excel表中
113 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等