Reac-csv excel

Thuộc tính bắt buộc đại diện cho dữ liệu CSV. Dữ liệu này có thể là mảng của mảng, mảng của đối tượng chữ hoặc chuỗi. Đây cũng có thể là một hàm trả về bất kỳ thứ nào trong số này

Ví dụ về Mảng của mảng

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

Ví dụ về mảng các đối tượng theo nghĩa đen

// Array of literal objects. Each item is rendered as CSV line however the order of fields will be defined by the headers props. If the headers props are not defined, the component will generate headers from each data item.
data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

Ví dụ về chuỗi

// A string can be used if the data is already formatted correctly

data = `firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;

// or using 3rd party package
import json2csv from "json2csv";
data = json2csv[arrayOfLiteralObjects];

Ví dụ hàm trả về dữ liệu

// this function just returns a basic array, but you could also map or return some recently downloaded data in state
function dataFromAsyncProcess[] {
  return [
    { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
    { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
    { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
  ];
}

- đạo cụ tiêu đề

Việc chỉ định

4 giúp xác định thứ tự của các trường CSV. Nội dung csv sẽ được tạo tương ứng

ghi chú

• Ý nghĩa của các tiêu đề có dữ liệu loại
  5 là sắp xếp thứ tự các trường VÀ thêm các tiêu đề đó vào đầu nội dung CSV
• Ý nghĩa của các tiêu đề có dữ liệu loại dữ liệu
  6 chỉ thêm các tiêu đề đó làm dòng đầu tiên của nội dung CSV

Nhãn tiêu đề tùy chỉnh

Nhãn tiêu đề tùy chỉnh có thể được sử dụng khi chuyển đổi dữ liệu loại

7 sang CSV bằng cách để chính mảng tiêu đề đó là một mảng các đối tượng bằng chữ có dạng

________số 8

Nếu mảng tiêu đề là một mảng các chuỗi, các nhãn tiêu đề sẽ giống như các khóa được sử dụng để lập chỉ mục các đối tượng dữ liệu

Ví dụ

import { CSVLink } from "react-csv";

headers = [
  { label: "First Name", key: "firstname" },
  { label: "Last Name", key: "lastname" },
  { label: "Email", key: "email" }
];

data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];


  Download me
;

Dữ liệu JSON lồng nhau

Có thể tham chiếu các chuỗi lồng nhau trong dữ liệu của bạn bằng ký hiệu dấu chấm

// Array of literal objects. Each item is rendered as CSV line however the order of fields will be defined by the headers props. If the headers props are not defined, the component will generate headers from each data item.
data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

0

Ghi chú. nếu tại bất kỳ thời điểm nào, các khóa lồng nhau được truyền không tồn tại thì hãy tìm khóa có ký hiệu dấu chấm trong đối tượng

- đạo cụ tách

Theo yêu cầu thêm tính năng này, từ bản phát hành

8,

9 hỗ trợ đạo cụ

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

0 theo mặc định bằng dấu phẩy

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

1

// Array of literal objects. Each item is rendered as CSV line however the order of fields will be defined by the headers props. If the headers props are not defined, the component will generate headers from each data item.
data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

50

- đạo cụ nhân vật kèm theo

Theo yêu cầu thêm tính năng này,

9 hỗ trợ một giá trị

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

3 mặc định là

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

4

// Array of literal objects. Each item is rendered as CSV line however the order of fields will be defined by the headers props. If the headers props are not defined, the component will generate headers from each data item.
data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

51

1. Thành phần CSVLink

Nó hiển thị một siêu liên kết và nhấp vào nó sẽ kích hoạt hành động tải xuống tài liệu CSV

Nó không chỉ chấp nhận các đạo cụ

// Array of arrays. Each item is rendered as a CSV line
data = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

5 và

4 mà còn tận dụng tất cả các đối số của hàm

// Array of literal objects. Each item is rendered as CSV line however the order of fields will be defined by the headers props. If the headers props are not defined, the component will generate headers from each data item.
data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

6 khi biết rằng chữ ký của nó là