vxe-table 导出 excel xlsx wps pdf 导出数据

已于 2022-01-26 22:15:37 修改
阅读量6.7k 收藏 11
点赞数 6
分类专栏： vxe-ui 文章标签： vxe-table vxe-grid
于 2020-12-21 20:19:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc26296/article/details/111494686
版权
vxe-table 提供了导出 excel(xlsx) 和 pdf 功能，借助 exceljs 和 jspdf.js 库。导出 xlsx 需要安装 vxe-table-plugin-export-xlsx 插件，而导出 pdf 则需 vxe-table-plugin-export-pdf，注意 pdf 导出需引入字体库以支持中文。
摘要由CSDN通过智能技术生成

vxe-table 导出 excel xlsx wps 导出数据

默认支持的导出格式为：txt、html、xml、cvs
在这里插入图片描述

导出 xlsx

如果需要导出为 xlsx 格式文件，就需要用到 exceljs（该插件默认不支持IE，要支持 IE 请去查看插件用法） 这个库来转换数据，然后再安装 vxe-table-plugin-export-xlsx 导出插件（支持v2、v3、v4），安装完成后列表中就可以选择 xlsx 类型了。

npm install vxe-table-plugin-export-xlsx exceljs

在这里插入图片描述

<
最低0.47元/天 解锁文章
仰望.
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
vxe-table导出xlsx，当前数据，全量数据
老黑的博客
12-06 2910
vxe-table导出全量数据，导出xlsx格式数据
vxe-table编辑、实时保存、打印、导出csv、导出xlsx
一个天秤座的程序猿????
05-27 8102
提示：附官方文档记录： 官网文档链接: https://vxetable.cn/v3/#/table/start/install vxe-table多功能表格插件使用记录前言一、vxe-table安装二、使用步骤1.编辑2.实时保存3.数据联动计算4.导出csv文件5.导出xlsx文件总结 前言 提示：项目中实际使用： vxe-table多功能表格 编辑、实时保存、自定义打印、导出csv、导出xlsx 提示：以下是本篇文章正文内容，下面案例可供参考 一、vxe-table安装 首先确定vue版本 .
vxe-table、vxe-grid合并行配置项生成
最新发布
MoYu的博客
07-12 1623
此方法根据某些条件自动合并具有相同数据的行，以便于在前端表格展示时减少冗余数据，提高可读性。通过指定哪些列应该被考虑合并（中的每一行都遍历剩余的所有行来查找连续的相同行。其他操作的时间复杂度在这个上下文中是可以忽略的。）来合并表格中的行。函数的时间复杂度主要由内部while循环决定，为。（用于判断哪些行应该被合并的条件字段名列表）、（指定哪些列应该被考虑合并的字段名列表）、（用于在列定义中查找字段名的键名，默认为。方法最终返回一个合并单元格的配置集合。的目的是根据给定的条件（），提供了灵活的合并逻辑。
vue表格插件vxe-table导出 excel
半兽先生的博客
01-12 2173
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。如果用最新版的，依赖，这样使用就会报错 Uncaught (in promise)亲测1.9.0版本可以正常使用。
踩坑：vue表格插件vxe-table之导出 .xlsx 文件
Greenhand_BN的博客
10-29 8810
各种百度，找不到想要的方案，当然有其他的方法写，比如直接用xlsx.js，但是看着好麻烦，不想使用！突然想到，会不会是版本的问题，于是乎，抱着试试的态度，卸载3.0的版本，安装2.0版本。一开使用的是3.0版本的，依赖，这样使用就会报错。另：如遇到下面的报错，则需要安装。
vue表格插件vxe-table导出 .xlsx 文件
weixin_46124693的博客
07-08 3535
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 示例 如果用最新版的，依赖，这样使用就会报错 Uncaught (in promise) 亲测2.2.2版本可以正常使用............
前端vxe-table导出xlsx excel文档和csv文档
qq_38946996的博客
03-19 3429
准备工作 npm 安装 vxe-table npm 安装 exceljs npm 安装 vxe-table-plugin-export-xlsx mian.js import VXETable from 'vxe-table' import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx' VXETable.use(VXETablePluginExportXLSX) <template> <div
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-table-v2.9.24_表格组件_Table_
09-28
7. **打印导出**：用户可以方便地将表格数据导出为Excel或PDF格式，同时，组件也支持打印功能，满足用户将表格内容打印出来的需求。 8. **表单渲染**：vxe-table可以与Vue的表单组件配合，实现动态渲染表单，根据...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
vxe-table vue表格解决方案 v4.5.20.zip
03-27
1. **数据绑定与操作**：vxe-table支持动态数据绑定，可以实时更新表格内容，同时提供便捷的数据增删改查操作，如insertRow、removeRow等API。 2. **表头与列配置**：通过灵活的列配置，开发者可以自定义列的显示...
jspdf vxe-table 导出 pdf 文件，解决中文乱码问题
我的博客
05-26 2693
vxe-table 导出 pdf 文件，解决中文乱码问题 将表格导出为 pdf 文件，默认是不支持中文的，会显示成乱码，可以通过使用字体库解决。 npm install xe-utils vxe-table vxe-table-plugin-export-pdf jspdf` // ... import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf' // ... VXETable.use(VXETablePluginExportPD
Vue table表格导出Excel方法
qq_57528681的博客
02-02 681
【代码】Vue table表格导出Excel方法。
【vxe-table】导出
YhWyl527的博客
05-07 2032
前端vxe-table导出xlsx excel文档和csv文档 npm 安装 vxe-table npm 安装 exceljs npm 安装 vxe-table-plugin-export-xlsx mian.js import VXETable from 'vxe-table' import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx' VXETable.use(VXETablePluginExportXLSX) <t
vxeTable怎么导出excel文件
qq_34082921的博客
06-12 609
在 vxe-table 中，columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数，这个参数是一个对象，包含了列的信息。如果这个方法返回 true，那么这一列会被导出；如果返回 false，那么这一列会被过滤掉，不会被导出。如果你想过滤掉操作列，你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性，然后根据这个属性的值来决定是否过滤这一列。例如，如果你的操作列的 field 属性是 ‘operation’。
推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]
weixin_44400823的博客
03-21 4040
1、插件地址 将前端 table 导出 excel , 基于 exceljs + file-saver , 适用于所有表格 基于 数据源的定制化导出 具大佬所说，是公司给俩星期开发时间开发出来的导出插件，在我使用vxe-table插件自带的导出功能时，那个导出是分组表头的问题确实影响了我很久~所幸有这么款简单易上手的插件，解决了我大部分的问题，也节省了很多时间。大家有兴趣可以去git上瞅瞅，如果有帮到的可以点个⭐啥的，有啥优化意见可以在上面提，大佬有时间的话回复的也蛮快。 2.简单操作实现前端导出，在也
vxe-table高级导出功能，导出表格样式
weixin_42812602的博客
06-08 5205
vxe-table的高级导出功能的弹窗里虽然有样式的勾选项，但是还需要你通过exportConfig.sheetMethod属性方法对导出表格进行配置，并不是勾选后就能导出你页面上显示的样式。最后吐槽一下vxe-table的操作文档，直给出了导出功能，却没有给出操作导出文件说明文档，还好我有过操作表格的经验，不至于浪费很多时间。如果你干不掉那些提出需求的人，那么就接受吧，废话止于此。目的要求：导出excel时，要把单元格背景颜色一并导出。1. 开启工具栏导出功能，要使用高级导出。
vxe-table 导出 xlsx 版本记录
qq_44830875的博客
04-19 1395
“vxe-table”: “^3.5.5”, “vxe-table-plugin-export-xlsx”: “^2.0.3”, “xe-utils”: “^3.5.4”, “exceljs”: “^4.3.0”, 使用得npm： npm install vxe-table@3 xe-utils@3 npm install vxe-table-plugin-export-xlsx@next exceljs 这样会报Uncaught (in promise) {status: false} 错误，应该是vxe
vxe-table表格存在动态列时的导出
dlchgg的博客
11-18 153
我想尽管使用了插槽展示数据，就算列的field不与字段对应也行，但是不能为null或者undefined。但是有个点，就是导出列的时候log看表列配置，发现动态列导不出来的列是没有field的。1、之前导出的时候发现动态列没数据，但是又有一个表的动态列是有数据的。2、后来发现虽然都是用的slot插槽匹配数据，没有细想就直接手动拼了field与字段匹配。记一下，后续继续编辑吧。
vxe-table 导出excel
01-18
以下是使用vxe-table插件导出excel的示例代码： ```vue <template> <div> <vxe-grid ref="grid" :data="tableData"></vxe-grid> <button @click="exportExcel">导出excel</button> </div> </template> <script> import 'vxe-table/lib/style.css'; import { Grid } from 'vxe-table'; import ExportXLSX from 'vxe-table-plugin-export-xlsx'; export default { components: { VxeGrid: Grid }, data() { return { tableData: [ // 表格数据 ] }; }, methods: { exportExcel() { const $grid = this.$refs.grid; $grid.exportData({ filename: '名称', type: 'xlsx', useStyle: true, // 是否导出样式 data: $grid.data }); } }, mounted() { // 注册导出xlsx插件 this.$grid.reg('exportXLSX', ExportXLSX); } }; </script> ``` 请注意，导出xlsx文件需要使用vxe-table-plugin-export-xlsx依赖，并且需要在mounted钩子函数中注册导出xlsx插件。
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值