vxe-table导出方法以及排坑指南

最新推荐文章于 2024-05-22 16:01:24 发布
最新推荐文章于 2024-05-22 16:01:24 发布
阅读量2.7k 收藏 1
点赞数
文章标签： npm vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyz246859/article/details/126527213
版权

在使用vxe-table组件的时候，需要使用到它的导出方法 但是很蛋疼的是 vxe不支持xlsx的文档格式 ，因此需要另做办法，方法如下所示：
在这里插入图片描述
需要引入 vxe-table-plugin-export-xlsx的依赖 但是当你使用npm安装了 噩梦就开始 直接报错Uncaught (in promise)，根本找不到原因的错误，因此想到可能是因为npm默认安装的版本都是最新的，才导致问题的发生，然后就重新了安装了2.0.0的版本，结果任然报错，这里就很让人抓狂了 一个插件 连稳定性都没有 真是让人恼火，最后在搜了无数相关的问题答案后，在重新了下载安装了2.2.2的版本 终于没有问题了，如下：
在这里插入图片描述
可以正常导出xlsx格式了

lyz246859
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
05-28
Compatibility 对应 vxe-table v4 版本 Installing npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/dist/style.css' // ... VXETable.use(VXETablePluginAntd)
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vue表格插件vxe-table导出 excel
半兽先生的博客
01-12 1907
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版本可以正常使用。
vxe-table的安装与使用
最新发布
weixin_46394325的博客
05-22 1100
功能更强大的table组件
踩坑：vue表格插件vxe-table之导出 .xlsx 文件
Greenhand_BN的博客
10-29 8349
各种百度，找不到想要的方案，当然有其他的方法写，比如直接用xlsx.js，但是看着好麻烦，不想使用！突然想到，会不会是版本的问题，于是乎，抱着试试的态度，卸载3.0的版本，安装2.0版本。一开使用的是3.0版本的，依赖，这样使用就会报错。另：如遇到下面的报错，则需要安装。
vxe-table高级导出功能，导出表格样式
weixin_42812602的博客
06-08 4935
vxe-table的高级导出功能的弹窗里虽然有样式的勾选项，但是还需要你通过exportConfig.sheetMethod属性方法对导出表格进行配置，并不是勾选后就能导出你页面上显示的样式。最后吐槽一下vxe-table的操作文档，直给出了导出功能，却没有给出操作导出文件说明文档，还好我有过操作表格的经验，不至于浪费很多时间。如果你干不掉那些提出需求的人，那么就接受吧，废话止于此。目的要求：导出excel时，要把单元格背景颜色一并导出。1. 开启工具栏导出功能，要使用高级导出。
vue最强table vxe-table 虚拟滚动列表 前端导出
热门推荐
jmszl1991的博客
07-06 1万+
vue table万能组件
Vue table表格导出Excel方法
qq_57528681的博客
02-02 657
【代码】Vue table表格导出Excel方法。
Vue使用vxe-table
m0_51431448的博客
01-27 7822
vxe-table是对element-ui进行了二次封装，基本样式也做了调整，并且把导出、打印等功能也集成进去了，这篇就介绍一下vxe-table的基本使用，其实和el-table差不多，使用起来基本一样。
vue表格插件vxe-table导出 .xlsx 文件
weixin_46124693的博客
07-08 3475
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-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-tablevue表格解决方案 v2.9.15
08-14
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vxe-tablevue表格解决方案 v2.9.18
09-28
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vxe-table-v2.9.24_表格组件_Table_
09-28
**vxe-table-v2.9.24：Vue.js中的高效表格组件** vxe-table是一款在Vue.js框架下设计的高性能表格组件，它的版本号为2.9.24，旨在提供一系列强大的功能来满足复杂的数据展示和操作需求。这款组件以易用性和灵活性为...
vxe-table vue表格解决方案源代码
03-15
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-table高级导出功能，导出表格中图片
weixin_42812602的博客
07-26 846
需求：导出表格时 表格中的图片一同导出。
使用vxe-table插件报错
温如君子
11-11 5316
报错截图如下所示： 解决方案： 在引用vxeTable前引用xe-utils
xlsx导出表格合并单元格边框样式缺失
落花生
08-18 2361
工作的时候遇到这个问题，找了很久，最后根据这位大哥的方法稍做修改解决了问题。 在此记录总结一下，以免之后用到 //调用传参 addRangeBorder(wb['Sheets']['分组表']['!merges'], wb['Sheets']['分组表']) //给合并行列赋值样式 addRangeBorder (range, ws) { let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
vxe-table 导出表格
03-07
vxe-table 是一个基于 Vue.js 的开源表格组件库，它提供了丰富的功能和灵活的配置选项，可以用于展示和处理数据表格。在 vxe-table 中，导出表格可以通过使用插件来实现。 要实现导出表格功能，你可以使用 vxe-table 的导出插件 vxe-table-plugin-exporter。该插件提供了多种导出格式的选项，包括 Excel、CSV、PDF 等。 以下是使用 vxe-table-plugin-exporter 导出表格的步骤： 1. 安装 vxe-table 和 vxe-table-plugin-exporter： ``` npm install vxe-table vxe-table-plugin-exporter ``` 2. 在项目中引入 vxe-table 和 vxe-table-plugin-exporter： ```javascript import 'vxe-table/lib/style.css'; import VXETable from 'vxe-table'; import ExporterPlugin from 'vxe-table-plugin-exporter'; Vue.use(VXETable); VXETable.use(ExporterPlugin); ``` 3. 在表格组件中添加导出按钮，并绑定导出事件： ```html <vxe-table ...> ... <template #toolbar> <button @click="exportTable">导出表格</button> </template> </vxe-table> ``` 4. 在表格组件的 methods 中定义导出事件： ```javascript methods: { exportTable() { this.$refs.table.exportData({ filename: '表格数据', // 导出的文件名 type: 'csv', // 导出的文件类型，可选值为 'csv', 'xlsx', 'pdf' mode: 'current', // 导出的数据范围，可选值为 'current', 'selected', 'all' }); }, }, ``` 这样，当点击导出按钮时，表格数据将会以指定的格式导出到文件中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值