【REACT】为ant design table 组件添加导出功能 - 使用到a标签download属性,未使用Blob对象

20200928更新——今天又做了新的探索,发现下面的例子里其实并没有使用到Blob对象。
今日探索的成果写在新博客中,完成后会把地址更新在这里。

======================
一直都用的datatable自带export和copy表中内容的功能,所以从来没为它们操过心。但使用react后,感觉datatable跟react的配合不太好(很大可能是我不会用😔)所以改用了ant-design的table组件。但是ant-design的table没有自带的导出功能啊!

 

昨天晚上的掉发之旅就开始了╮(╯▽╰)╭

 

总体思路:用于table已经渲染出来,数据实际已经存在于state中,因此不再回后台再请求一次。用户不一定每次都要导出,所以一定要等用户点击 导出按钮 之后再触发下载方法(下载就是导出,导出就是下载)

这里使用了<a> 的download属性,以及Blob对象。另外怎么把data转换成csv格式竟然也卡了我很长时间。唉……

资料: https://www.jianshu.com/p/4666ad3a9c3d

    constructor(props) {
        super(props);
        this.MainTableColumns = [

            {
                title: 'I
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值