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

利用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 即可,代码如下:

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

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

相关推荐
JinSo几秒前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github
答案answer5 分钟前
three.js 实现几个炫酷的粒子特效(火焰,烟雾,烟花)
前端·three.js
ObjectX前端实验室20 分钟前
三年写了很多代码,也想写写自己
前端·程序员
满分观察网友z25 分钟前
uniapp的navigator跳转功能
前端
江城开朗的豌豆30 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
无奈何杨33 分钟前
CoolGuard风控节假日完善,QLExpress自定义函数
前端·后端
CSR-kkk1 小时前
前端工程化速通——①ES6
前端·es6·速通
yt948321 小时前
C#实现CAN通讯接口
java·linux·前端
前端小巷子1 小时前
Cookie与Session:Web开发中的身份验证与数据存储
前端·javascript·面试