ant design vue 表格 Table 实现导出功能

已于 2022-06-13 18:33:33 修改
阅读量5.1k 收藏 16
点赞数 3
分类专栏： Ant Design Vue Vue 文章标签： javascript css vue.js
于 2021-06-28 10:27:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe122343/article/details/118295313
版权

当你搜这个问题的时候，我想你已经知道了 Ant Design Vue 的 Table 组件没有导出功能，比用 View UI 麻烦一点
在这里插入图片描述
话不多说 直接上可以跑的代码供大家参考使用
表格写两个，一个导出用，隐藏掉；另一个展示用。主要是 data-source 绑定的值不同

<!--导出用-->
<a-table bordered :columns="columns1" :data-source="infoListExport" id="tableExport"
         rowKey="id" :pagination="false" style="display: none">
</a-table>
<!--展示用-->
<a-table bordered :columns="columns1
最低0.47元/天 解锁文章
qwe122343
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
solocoder的博客
03-29 7181
前端导出 excel 的需求很多，但市面上好用的库并不多，讲明白复杂使用场景的文章更少。 本文将以文字 + demo 源码的形式，力求讲清楚满足 99% 使用场景的终极 excel 导出方案。 如果项目中用到了 AntD，那就更简单了，因为 Table 本身已经设置好了 column 和 dataSource，只需解析 column 和 dataSource 即可快速导出 Excel。 实现功能： 简单表格导出 为表格添加样式（更改背景色、更换字体、字号、颜色） 设置行高、列宽 解析 ant-design
前端 vue 项目中导出 table 为 excel 表格
romeo12334的博客
03-26 5373
背景介绍： 使用 vue 框架以及vue的其他生态系统，组件库使用的是 element-ui。 首先要安装两个包：XLSX，file-saver npm install --save xlsx file-saver 现在有一个按钮，和一个表格，点击按钮发生导出表格的事件。 // template <el-botton @click="export">export</el-but...
vue3+ant design实现表格数据导出Excel
最新发布
qq_53541336的博客
05-09 1278
今天终于有时间来更新文章了，最近公司项目比较紧急，再加上自己要准备毕设答辩，所以都没啥自己的空余时间，这几天自己做的任务也完成的差不多了，之前已经更新过表格数据的增删改查，今天就来讲一下如何实现表格数据的导入吧，原本想把导出也一起写的，但是两者涉及的知识点比较多，所以就分开来阐述。因为刚开始自己做这个的时候也是小白，也浏览了很多大佬的技术博客，通过不断地总结和修改才积累了有关这个功能的经验，希望我的文章能够帮到更多的小伙伴呀，一起不断学习吧！提示：以下是本篇文章正文内容，下面案例可供参考。
vue2 antdesign table导出
weixin_42630109的博客
03-03 427
vue2 antdesign table导出
将ant-design-vue的table表格导出为excel文件 2021-10-07
y1377593732的博客
10-07 2468
目的 将ant-design-vue的table表格导出为excel文件 说明 根据自己的想法做了一下改装，不知道改的合理不合理。 如果有大神愿意指导，希望可以指出不足以及修改方案等。 遇到的问题 xlsx、js-xlsx、node-xlsx的区别，本来以为xlsx可以直接做到和后台一样的文档编辑效果，查了一下才知道有所限制，看来是个大佬的个人作品。 希望解决的问题 希望在修改表格的导出式样时，不需要修改源码，添加新的工序即可。 效果图 要导出的表格 导出后的文件 例子 1.安装依赖 cnpm i fi
ant-design pro导出表格数据为Excel文件
wangdanYL的博客
07-23 442
https://blog.csdn.net/W3464116859/article/details/115306552
ant design vue做导入导出excel
weixin_69639387的博客
08-18 1822
ant design vue做导入导出excel
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', ...
Ant-Design-Pro-V5： ProTable前端导出excel表格。
~~~
09-01 1069
Ant-Design-Pro-V5： ProTable前端导出excel表格。
Ant design-11导出Excel表格
m0_59214979的博客
01-06 330
本节：导出Excel表格 当服务器写好功能时，直接定义点击事件，然后调用就可以了。 async exportList() { window.open(`${this.serverUrl}consult/to_excel?consultsIds=${this.ex_id}`); alert('导出成功'); }, ...
【ant design vue】纯前端导出图片功能
m0_59697051的博客
05-25 1003
在ant design vue 项目中遇到了一个需求：纯前端导出图片。经过查询文档案例，结合自身项目需求后，成果如下： 因为多个页面使用到，所以我把导出方法封装了起来，代码如下： 首先，引入这两个组件 下载： npm i jszip -S or npm jszip npm install file-saver --save 因为项目中有分导出一个文件夹包含全部图片（导出选中数据包含的图片的首图），另外一种是导出一个文件夹里面多个文件夹，每个文件夹包含多张图片（导出选中数据包含的全部图片），.
vue中axios将table表格数据导出至excel表格
00年女程序员分享自己的学习笔记
07-19 1420
ArrayBuffer不能直接操作，而是要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件(.img,.pdf,.txt,.html,等等)。responseType表示服务器响应的数据类型，可以是‘arraybuffer’,‘blob’,‘document’,‘json’,‘text’,‘stream’，默认是‘json’...
table导出excel
qq_41733859的博客
03-29 125
<a id="output_table">导出</a> <script> // 核心：拼接完整的html格式文档并填充数据 //使用outerHTML属性获取整个table元素的HTML代码， 包括根标签<table></table> // 自定义封装html格式文档<html><hea...
vue实现导出二进制流(blob)文件（get请求）
前端-尔嵘
01-21 4813
说明：该导出主要是基于后端做的，前端拿到二进制blob文件流。方法三: 兼容IE和谷歌、火狐浏览器。方法二：导出后需要用execl打开。方法一：导出后直接打开的是表格。
vue中table表格导出为图片格式
往事随风
09-23 2137
vue中table表格点击下载为图片格式 实现思路：给页面中需要导出为图片的内容添加id名，调用封好的方法即可直接导出。以下是具体的实现方法 1、安装依赖 npm install --save html2canvas 2、在需要导出的页面引用 import html2canvas from "html2canvas"; 3、具体实现 <template> <div style="min-height: 450px;"> <button @click="downlo
vue下载导出调用post接口，get
xiaobai_qihang的博客
02-03 1091
vue下载导出调用post接口 看了很多关于vue下载导出调用post接口和get请求的文章，在此记录一个本地有用的调用方法，也希望对一些小伙伴有用，直接上代码： let url = ‘你的url’ axios.aaaaa.post(url,JSON.stringify(params),‘queryEngine’) // 这里是封装后的axios.aaaaa .then(res => { const xlsx = ‘application/vnd.ms-excel’ const blob = new
ant design vue 表格（Table）多个多选功能组件实现
05-30
要实现Ant Design Vue表格（Table）的多个多选功能组件，你可以使用Ant Design Vue的Table组件的row-selection属性。这个属性可以将表格的每一行都变成一个可选中的复选框。如果需要多个多选功能组件，你可以将多个Table组件嵌套在一个父组件中，并在每个Table组件中使用不同的row-selection属性来实现不同的多选功能。 以下是一个简单的示例代码： ``` <template> <div> <a-table :columns="columns1" :data-source="data" :row-selection="rowSelection1"></a-table> <a-table :columns="columns2" :data-source="data" :row-selection="rowSelection2"></a-table> </div> </template> <script> export default { data() { return { data: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' } ], rowSelection1: { type: 'checkbox', onChange: (selectedRowKeys, selectedRows) => { console.log(selectedRowKeys, selectedRows); } }, rowSelection2: { type: 'radio', onChange: (selectedRowKeys, selectedRows) => { console.log(selectedRowKeys, selectedRows); } }, columns1: [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ], columns2: [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ] }; } }; </script> ``` 在这个示例中，我们创建了两个Table组件，并分别定义了不同的row-selection属性。第一个Table组件使用复选框，第二个Table组件使用单选框。当用户选择行时，我们使用onChange事件来打印所选行的键和值。 你可以根据自己的需求修改代码来实现不同的多选功能组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值