vue表格插件vxe-table导出 excel

news/2024/7/27 10:38:58/文章来源:https://blog.csdn.net/qq_43770056/article/details/135549801

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.luyixian.cn/news_show_925482.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arduino快速上手esp32方案开发

一、什么是ESP32&#xff1f; ESP32是Espressif Systems推出的一款高性能、低功耗的Wi-Fi和蓝牙双模系统级芯片&#xff08;SoC&#xff09;&#xff0c;广泛应用于物联网、智能家居、可穿戴设备等领域。它基于极低功耗的Tensilica Xtensa LX6微处理器&#xff0c;并集成了丰富…

云计算概述(发展过程、定义、发展阶段、云计算榜单)(一)

云计算概述&#xff08;一&#xff09; &#xff08;发展过程、定义、发展阶段、云计算榜单&#xff09; 本文目录&#xff1a; 零、00时光宝盒 一、前言 二、云计算的发展过程 三、云计算的定义 四、云计算发展阶段 五、云计算公司榜单看云计算兴衰 六、参考资料 零、0…

C++ 设计模式之组合模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【简介】什么是组合模式 组合模式是⼀种结构型设计模式&#xff0c;它将对象组合成树状结构来表示“部分-整体”的…

自动化神器 Playwright 的 Web 自动化测试解决方案

1. 主流框架的认识 总结&#xff1a; 由于Selenium在3.x和4.x两个版本的迭代中并没有发生多大的变化&#xff0c;因此Selenium一统天下的地位可能因新框架的出现而变得不那么稳固。后续的Cypress、TestCafe、Puppeteer被誉为后Selenium时代Web UI自动化的三驾马车。但是由于这三…

ES数据聚合

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…

Python办公自动化 – 自动化文本翻译和Oracle数据库操作

Python办公自动化 – 自动化文本翻译和Oracle数据库操作 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自…

Smallpdf扫描、转换、压缩、编辑、签名PDF

【应用名称】&#xff1a;Smallpdf: 扫描、转换、压缩、编辑、签名PDF 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#Smallpdf 【应用版本】&#xff1a;1.71.0 【应用大小】&#xff1a;150MB 【软件说明】&#xff1a;通过 Smallpdf&#xff0c;您可以&…

【河海大学论文LaTeX+VSCode全指南】

河海大学论文LaTeXVSCode全指南 前言一、 LaTeX \LaTeX{} LATE​X的安装二、VScode的安装三、VScode的配置四、验证五、优化 前言 LaTeX \LaTeX{} LATE​X在论文写作方面具有传统Word无法比拟的优点&#xff0c;VScode作为一个轻量化的全功能文本编辑器&#xff0c;由于其极强的…

Python 二维平面Delaunay三角网建立

目录 一、算法概念二、代码实现三、结果示例根据二维平面内的离散点建立平面三角网。 一、算法概念 三角剖分与Delaunay剖分定义:如何把一个散点集剖分成不均匀的三角形网格,即在给定的平面点集上,生成三角形集合的过程。考虑平面点集P={p1,p2,p3,…,pn},我们希望得到三…

Kibana:使用反向地理编码绘制自定义区域地图

Elastic 地图&#xff08;Maps&#xff09;附带预定义区域&#xff0c;可让你通过指标快速可视化区域。 地图还提供了绘制你自己的区域地图的功能。 你可以使用任何您想要的区域数据&#xff0c;只要你的源数据包含相应区域的标识符即可。 但是&#xff0c;当源数据不包含区域…

前端安全专题

xss (Cross Site Scripting) 跨站脚本攻击 原理 通常指黑客通过"HTML注入"篡改了网页&#xff0c;插入了恶意的脚本&#xff0c;从而在用户浏览网页时&#xff0c;控制用户浏览器的一种攻击。 常见攻击类型 存储型XSS 攻击者将恶意的 JavaScript 脚本存储在网站…

模板设计模式-实例

在软件开发中&#xff0c;有时也会遇到类似的情况&#xff0c;某个方法的实现需要多个步骤&#xff08;类似“请客”&#xff09;&#xff0c;其 中有些步骤是固定的&#xff08;类似“点单”和“买单”&#xff09;&#xff0c;而有些步骤并不固定&#xff0c;存在可变性&…

redis之单线程和多线程

目录 1、redis的发展史 2、redis为什么选择单线程&#xff1f; 3、主线程和Io线程是怎么协作完成请求处理的&#xff1f; 4、IO多路复用 5、开启redis多线程 1、redis的发展史 Redis4.0之前是用的单线程&#xff0c;4.0以后逐渐支持多线程 Redis4.0之前一直采用单线程的主…

【GitHub项目推荐--一行命令下载全网视频】【转载】

项目地址&#xff1a;https://github.com/soimort/you-get 首先声明&#xff0c;请不要使用该项目从事违法活动哦~仅供学习使用&#xff01; 解决痛点 如果你上网的时候看了一些东西不错&#xff0c;想下载下来&#xff0c;或者在线观看喜欢的视频&#xff0c;但是没有找到网…

Android Studio 如何设置中文

Android Studio 是一个为 Adndroid 平台开发程序的集成开发环境&#xff08;IDE&#xff09;。 如何安装中文插件 在 Jetbrains 家族的插件市场上&#xff0c;是能够搜到语言包插件的&#xff0c;正常情况下安装之后只需要重启即可享受中文界面&#xff0c;可AndroidStudio 中…

物联网介绍

阅读引言&#xff1a; 本文从多方面叙述物联网的定义以及在物联网当中的各种通信的介绍。 一、物联网的定义 1.1 通用的定义 物联网&#xff08;Internet of Things&#xff0c;IOT&#xff1b;也称为Web of Things&#xff09;是指通过各种信息传感设 备&#xff0c;如传感器、…

Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹&#xff0c;用来存放接口类型 2定义一个接口&#xff0c;用于限制person对象的具体属性 当需要用这个类型形成数组时&#xff0c;有2种写法 export type Persons Array<PersonInter> export type Persons PersonInter[] 3在文件中使…

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

C#--核心

CSharp核心知识点学习 学习内容有&#xff1a; 绪论&#xff1a;面向对象的概念 Lesson1&#xff1a;类和对象 练习&#xff1a; Lesson2&#xff1a;封装--成员变量和访问修饰符 练习: Lesson3:封装--成员方法 Lesson4&#xff1a;封装--构造函数和析构函数 知识点四 垃圾回收…

git主分支合并到本地分支起冲突的解决办法

1.原因&#xff1a;一个项目几个人共同承担&#xff0c;难免有交叉的部分&#xff0c;这个时候交叉部分的提交就会导致冲突 2.方法&#xff1a;点开该类手动进行更改&#xff1a; 一般会有两种情况&#xff1a;一个是更改&#xff0c;一个是冲突(IDEA右上角会显示)&#xff1b;…