利用React-papaparse实现纯前端CSV导出

今天遇到了一个需求是将页面中图表的信息导出成 CSV类似这样：当然Table的数据也可以导出CSV，图表也好，Table也好，其本质都是数据驱动，我们只要把数据处理成CSV导出的格式就好了。

在 github 逛了一下，发现 papaParse 这个库比较适合做，于是我们便使用 react-papaparse 来实现一个 CSV 导出吧，这个库已经封装的很好了，使用是比较简单的。

react-papaparse ：react-papaparse.js.org/

具体效果你也可以访问这里查看：stackblitz.com/edit/vitejs...

我们主要使用其中的 CSVDownloader，都是 hooks 写法，一个 use 即可，代码如下：

这里我们就使用了一份模拟数据，你只需要根据你的数据把其转换成对应的数据结构就可以了。

首先，我们准备一份数据，是一个对象数组， key 就是表头，value 就是值
然后我们使用 useCSVDownloader 导出CSVDownloader 和 Type
以 CSVDownloader作为父组件，为 data 属性传入数据，设置 Type.Link 链接模式，不然是一个 Button，这样我们才可以自定义按钮的样式；然后还要设置 bom={true} config={{delimiter: ',' }}
子元素就是你要的样式啦，注意点击事件不是在 Button 上的，而是在CSVDownloader 上，所以不用为 Button 设置点击事件哈。

ini 复制代码

import { Button, Tooltip } from 'antd';
import { useCSVDownloader } from 'react-papaparse';
import { DownloadOutlined } from '@ant-design/icons';
import MyCard from '../common/Card';

export default function DemoCSVDownload() {
  const fileTitle = 'CSV导出文件';
  const { CSVDownloader, Type } = useCSVDownloader();
  const transData = [
    {
      'Column 1': '1-1',
      'Column 2': '1-2',
      'Column 3': '1-3',
      'Column 4': '1-4',
    },
    {
      'Column 1': '2-1',
      'Column 2': '2-2',
      'Column 3': '2-3',
      'Column 4': '2-4',
    },
    {
      'Column 1': '3-1',
      'Column 2': '3-2',
      'Column 3': '3-3',
      'Column 4': '3-4',
    },
    {
      'Column 1': 4,
      'Column 2': 5,
      'Column 3': 6,
      'Column 4': 7,
    },
  ];
  return (
    <MyCard>
      <CSVDownloader
        type={Type.Link}
        filename={fileTitle}
        bom={true}
        config={{
          delimiter: ',',
        }}
        data={transData}
      >
        <Tooltip title="导出CSV">
          <Button
            size="large"
            shape="circle"
            icon={<DownloadOutlined />}
            style={{ border: 'none' }}
          >
            导出
          </Button>
        </Tooltip>
      </CSVDownloader>
    </MyCard>
  );
}

Papaparse

这是在浏览器内最快的 CSV（或分隔文本）解析器。根据 RFC 4180，可靠且正确的。包括许多功能，例如直接解析 CSV 文件（本地或通过网络）、流式传输大文件（甚至通过 HTTP）、反向解析（将 JSON 转换为 CSV）等等。它在 GitHub 上有超过 10.8k 颗星。

GitHub：github.com/mholt/PapaP...

DEMO：www.papaparse.com/demo

前端如何实现Echarts或者Table数据CSV文件导出? 使用papaparse就可以

利用React-papaparse实现纯前端CSV导出

Papaparse