vue表格插件vxe-table导出 excel

这篇具有很好参考价值的文章主要介绍了vue表格插件vxe-table导出 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版本可以正常使用 文章来源地址https://www.toymoban.com/news/detail-813845.html

到了这里,关于vue表格插件vxe-table导出 excel的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vxe-table表格合并单元格和编辑

    //这是在vue上面引用vxe-table插件实现的,主要方法都设置在table中,mergeCells,tableData都是在vue页面的data初使化数据, :footer-method=“footerMethod”:尾部数据,:merge-footer-items=“mergeCells”:尾部合并单元格。vxe-table网址:https://vxetable.cn/#/table/advanced/footerSpan

    2023年04月09日
    浏览(29)
  • vxe-table中<vxe-grid>组件中表格数据排序问题sort-change

    问题描述,首先使用vxe-grid虚拟列表为了同时渲染大批量数据的,但是从iview ui里的table和element ui 里table都是只能渲染少量数据,达不到大批量数据渲染,所以改用vxe-grid。 但是有个排序的问题在iview ui和element ui 里table都不会存在排序混乱的问题,而vxe-grid里的排序会有问题,

    2024年02月16日
    浏览(33)
  • 使用ElementUI的el-tab+vxe-table表格+复选框选择

    效果: 功能:首先进来是全部清空的状态的 点击左边选择不同项右边会实时发送接口获取数据填充表格 复选的内容可以保留显示,比如A的1勾选后切换到B再切换回来A的1仍然是勾选状态 说实话官网的setCheckboxRow方法我实现不了,这里就是纯蠢蠢的办法实现,在这里做个记录

    2024年01月17日
    浏览(36)
  • Vue3 vxe-table 手写鼠标区域选中

    参考原文地址:vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]-CSDN博客 准备vxe-talbe@4.5.7,Vue@3.3.4,在原作者的基础上进行了修改,修改后和官网几乎无差别,允许左右侧固定列选中,允许任意范围选中,但是键盘监听功能没添加//感觉没啥软用.... 先看效果: 正常鼠标从左上往右下

    2024年02月05日
    浏览(39)
  • vue3 + vxe-table 封装通用Grid业务组件

    视频DEMO 功能 基于vxe-table v4 / vxe-grid 全局注册组件 无需单独引入 动态按需引入样式vite-plugin-style-import 支持传入高度 | 默认自适应高度 自定义表头 slot,实现下拉、区间、日期,并对表头参数进行校验(数字、长度、指定格式等) 自定义工具栏工具列,重写自定义列配置项,实现拖拽

    2023年04月08日
    浏览(35)
  • vxe-table中树形结构

    如图,同事让帮忙实现一个需求  从二级树节点开始,同时选中的只能有一个二级树节点,选中的二级树节点之下的子节点都可以被选中。否则不能被选中 直接上代码 需要注意的是,文中树状图传递的数据是打平的数据,设置代码是下图,而不是树状图!!  上述的这一点非常

    2024年02月10日
    浏览(34)
  • 关于vxe-table全局引入的问题

    主要讲解一下vxe-table全局引入然后使用碰到的问题 0:vxe-table的官网地址 1:基本环境 (1):vue版本为3.x以上(我的是3.2.13) (2): 依赖库:xe-utils 注意:这篇博客的是vue3的脚手架搭建的,如果需要看低版本,请点击这里 2:使用npm安装 3:package.json文件里面就会有以下内

    2024年02月11日
    浏览(30)
  • vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作

    该功能存在bug哦,移步我的新博客:vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]_wanghanlu_的博客-CSDN博客 在看vxe-table 文档时,发现一个功能,鼠标区域选中,觉得这个功能很好。  但是仔细发现,这个功能不是免费的。我就想想,为啥不能自己实现呢。 下面给你看看我的最终

    2024年02月15日
    浏览(29)
  • 前端基础(Element、vxe-table组件库的使用)

    前言:在前端项目中,实际上,会用到组件库里的很多组件,本博客主要介绍Element、vxe-table这两个组件如何使用。 目录 Element 引入element 使用组件的步骤 使用对话框的示例代码 效果展示  vxe-table 引入vxe-table 成果展示 总结 官网地址 Button 按钮 | Element Plus (element-plus.org) 在m

    2024年02月10日
    浏览(27)
  • vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]

    前几天写了一个关于 vxe-table 鼠标滑动选择多行 的博客,在项目上线的过程中,发现这个功能还是有点bug,在经过我对vxe-table pro版本 的演示后vxe-table PRO,认真调试后,终于解决了bug,并且这个功能和pro版本可以说是几乎一模一样。注意:我是说这个滑动选择的功能,不是说是

    2024年02月05日
    浏览(125)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包