赵走x博客 - 开发者的网上家园

22、Excel：一个出色的表格组件：下载表格数据

资源编号:76072 书籍 React快速上手开发热度：80

排序、编辑、搜索功能以后，用户终于能够获得想要的数据了。如果随后可以让用户把处理好的结果下载下来，不就更完美了吗？

幸运的是，没有什么能难倒React。你只需要取得当前数据this.state.data 并以JSON 或者CSV 格式输出就可以了。

图3-13 显示了当用户点击Export CSV 后，下载一个名为data.csv 的文件（留意浏览器窗口的左下角），然后在Microsoft Excel 中打开这个表格的最终结果。

![bs64](https://img.handsomemark.com/2019/11/11/aff0cdca-049f-11ea-b8d1-0242ac140002.png)
图3-13：以CSV 格式输出表格数据到Microsoft Excel

首先要在工具栏添加一个新的选项。我们使用HTML5 的特性，在用户点击`<a> `标签时触发文件下载。因此，这两个新的“按钮”其实只不过是用CSS 修饰的链接而已：
```
_renderToolBar:function(){

return React.DOM.div({className: 'toolbar'},
              React.DOM.button(
                  {onClick: this._toggleSearch,className:'toolbar'},
                  'search'
              ),
              React.DOM.a({onClick:this._download.bind(this,'json'),href:'data.json'},'Export JSON'),
              React.DOM.a({onClick:this._download.bind(this,'csv'),href:'data.csv'},'Export CSV'),
          )
        },
```

现在实现_download() 函数。输出JSON 格式很简单，但输出CSV 格式需要一些额外步骤。从本质上讲，只需要对所有行和每一行中的所有单元格进行循环，并拼接成一个长字符串即可。一旦这项工作完成，函数就会通过download 属性和window.URL 创建的href 二进制blob 来初始化下载功能：

```
_download:function(format,ev){
            var contents=format==='json'?JSON.stringify(this.state.data):
                this.state.data.reduce(function (result, row) {
                    return result+
                            row.reduce(function (rowresult,cell,idx) {
                                return rowresult+'"'+cell.replace(/"/g,'""')+'"'
                                +(idx<row.length-1?',':'');
                            },'')
                            +"\n";
                },'');
            var URL=window.URL||window.webkitURL;
            var blob=new Blob([contents],{type:'text/'+format})
            ev.target.href=URL.createObjectURL(blob);
            ev.target.download='data.'+format
        },
```