vue表格插件vxe-table导出 excel

news/2024/7/21 4:41:17 标签: excel

vxe-table 默认支持导出 CSV、HTML、XML、TXT格式的文件,不支持 xlsx 文件 要想导出 xlsx 文件,需要使用 vxe-table-plugin-export-xlsx 依赖

 参考:https://cnpmjs.org/package/vxe-table-plugin-export-xlsx/v/2.1.0-beta

1.安装

npm install vxe-table-plugin-export-xlsx@2.2.2
npm install exceljs
main.js引入
...
import VXETable from 'vxe-table'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
...

VXETable.use(VXETablePluginExportXLSX)

 例子:

 <vxe-grid ref="grid" v-bind="tableData"></vxe-grid>
 <button @click="exportExcel">导出excel</button>
// 导出elsx
exportExcel(){
	const $grid = this.$refs.grid

          $grid.exportData({
              filename: '名称',
              type:'xlsx',
              useStyle:true, //是否导出样式
              data:$grid.data
            })
     
    },

如果用最新版的,依赖,这样使用就会报错 Uncaught (in promise)
亲测2.2.2版本可以正常使用 

导出pdf 

npm install vxe-table-plugin-export-pdf@1.9.0
main.js引入
...
import VXETable from 'vxe-table'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
...

VXETable.use(VXETablePluginExportPDF)

亲测1.9.0版本可以正常使用 


http://www.niftyadmin.cn/n/5320351.html

相关文章

UL2034详细介绍UL 安全单站和多站一氧化碳报警器标准

在介绍相关标准之前先介绍一下UL认证和UL测试报告的区别&#xff0c;检测认证行业6年老司机 UL认证是自愿性的认证&#xff0c;需要检测产品和审核工厂&#xff0c;每个季度审核一次&#xff0c;费用高、时间久&#xff0c;而且审厂非常的严格。 UL测试报告是根据产品选用相应…

RT-Thread:STM32 PHY 调试,使用软件包 WIZNET 驱动 W5500

说明&#xff1a; 1. 本文记录使用 RT-Thread 软件包 WIZNET驱动 W5500 的调试笔记。 2. 采用 RT-Thread Studio 工程 STM32F407VET6 芯片&#xff0c;W5500 PHY芯片&#xff0c;两者之间使用SPI接口链接 。 注意&#xff1a; 1.在按流程建立工程&#xff0c;和移植完 wizn…

debian 11 arm64 aarch64 D2000 平台编译 box86 box64 笔记

参考资料 https://github.com/ptitSeb/box86/blob/master/docs/COMPILE.md 源码地址 GitHub - ptitSeb/box86: Box86 - Linux Userspace x86 Emulator with a twist, targeted at ARM Linux devices deb在线源地址&#xff08;打不开&#xff09;&#xff1a; Itais box86…

人机协同中的偏序关系

偏序关系是指集合中的元素之间存在一种有限的、非全序的关系。在该关系下&#xff0c;元素之间可以进行比较&#xff0c;但不一定能够确定它们的相对顺序。 在人机协同中&#xff0c;偏序关系可以用来描述人和机器之间的合作关系、信息传递关系或任务分配关系。例如&#xff0c…

若依项目的table列表中对每一个字段增加排序按钮(单体版和前后端分离版)

一、目标&#xff1a;每一个字段都添加上下箭头用来排序 只需要更改前端代码&#xff0c;不需要更改后端代码&#xff0c;后面会讲解原理 二、单体版实现方式&#xff1a; 1.在options中添加sortable:true 2.在需要排序的字段中添加sortable:true 三、前后端分离版 1.el-tab…

一步步指南:从指定时长中提取需求的帧图片,高效剪辑视频

在现代多媒体时代&#xff0c;视频已经成生活中不可或缺的一部分。从视频中提取某一帧图片&#xff0c;或者对视频进行剪辑&#xff0c;都是常见的需求。下面一起来看云炫AI智剪如何从指定时长中提取需求的帧图片&#xff0c;如何高效地剪辑视频。 按指定时长提取视频某帧图片的…

如何在Spring Boot中使用EhCache缓存

1、EhCache介绍 在查询数据的时候&#xff0c;数据大多来自于数据库&#xff0c;我们会基于SQL语句与数据库交互&#xff0c;数据库一般会基于本地磁盘IO将数据读取到内存&#xff0c;返回给Java服务端&#xff0c;我们再将数据响应给前端&#xff0c;做数据展示。 但是MySQL…

解决:ModuleNotFoundError: No module named ‘dbutils’

解决&#xff1a;ModuleNotFoundError: No module named ‘dbutils’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named dbutils背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff0c;直接安装方法二&#xff0c;手动下载安装方法三&#xff0c;…