react:导出表格数据（csv）

最新推荐文章于 2024-05-15 09:34:58 发布

灰鸦893

最新推荐文章于 2024-05-15 09:34:58 发布

阅读量492

点赞数 9

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_56507133/article/details/136250204

版权

下载csv插件

npm i react-csv --save

引用

import { CSVLink } from "react-csv";

将组件与需要导出的数据绑定

import React from "react";
import { CSVLink } from "react-csv";
import {
  Button,Card
} from "antd";


//需要绑定的数据
const data = [
  {
    key: "1",
    id: "JK201806061552001",
    name: "刘姥姥",
    age: 32,
    sex: "女",
    address: "康复一区",
    room: "1101",
    OriginalBed: "01",
    OriginalPrice: "20.00",
    transferBed: "02",
    transferBedPrice: "30.00",
    transferRoomTime: "2018-06-06 09:01:50",
    operator: "测试操作员",
    transferRoomWhy: "测试",
    // tags: ["nice", "developer"],
  },
  {
    key: "2",
    id: "JK201806061552001",
    name: "宋姥姥",
    age: 32,
    sex: "女",
    address: "康复一区",
    room: "1101",
    OriginalBed: "01",
    OriginalPrice: "20.00",
    transferBed: "02",
    transferBedPrice: "30.00",
    transferRoomTime: "2018-06-06 09:01:50",
    operator: "测试操作员",
    transferRoomWhy: "测试",
    // tags: ["nice", "developer"],
  },
  {
    key: "3",
    id: "JK201806061552001",
    name: "李姥姥",
    age: 32,
    sex: "女",
    address: "康复一区",
    room: "1101",
    OriginalBed: "01",
    OriginalPrice: "20.00",
    transferBed: "02",
    transferBedPrice: "30.00",
    transferRoomTime: "2018-06-06 09:01:50",
    operator: "测试操作员",
    transferRoomWhy: "测试",
    // tags: ["nice", "developer"],
  },
  {
    key: "4",
    id: "JK201806061552001",
    name: "王姥姥",
    age: 32,
    sex: "女",
    address: "康复一区",
    room: "1101",
    OriginalBed: "01",
    OriginalPrice: "20.00",
    transferBed: "02",
    transferBedPrice: "30.00",
    transferRoomTime: "2018-06-06 09:01:50",
    operator: "测试操作员",
    transferRoomWhy: "测试",
    // tags: ["nice", "developer"],
  },
  {
    key: "5",
    id: "JK201806061552001",
    name: "柳姥姥",
    age: 32,
    sex: "女",
    address: "康复一区",
    room: "1101",
    OriginalBed: "01",
    OriginalPrice: "20.00",
    transferBed: "02",
    transferBedPrice: "30.00",
    transferRoomTime: "2018-06-06 09:01:50",
    operator: "测试操作员",
    transferRoomWhy: "测试",
    // tags: ["nice", "developer"],
  },
];

const TransferBed = () => {
  
  return (
    <>
      <Card className={"table"}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: "20px",
          }}
        >
          {/* 表格导出 */}
          <CSVLink data={data}>
            <Button
              type="default"
              style={{ color: "#0D66FF", borderColor: "#0D66FF" }}
              
            >
              导出
            </Button>
          </CSVLink>
        </div>
      </Card>
    </>
  );
};
export default TransferBed;

效果：