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", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ]; 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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ]; 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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ]; } - đạo cụ tiêu đềViệc chỉ định <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>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
Nhãn tiêu đề tùy chỉnhNhãn tiêu đề tùy chỉnh có thể được sử dụng khi chuyển đổi dữ liệu loại <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ]; <CSVLink data={data} headers={headers}> Download me </CSVLink>; Dữ liệu JSON lồng nhauCó 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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ];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áchTheo yêu cầu thêm tính năng này, từ bản phát hành <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>8, <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>9 hỗ trợ đạo cụ // Array of arrays. Each item is rendered as a CSV line data = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ];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", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ];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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ];50 - đạo cụ nhân vật kèm theoTheo yêu cầu thêm tính năng này, <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>9 hỗ trợ một giá trị // Array of arrays. Each item is rendered as a CSV line data = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ];3 mặc định là // Array of arrays. Each item is rendered as a CSV line data = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ];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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ];51 1. Thành phần CSVLinkNó 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", "[email protected]"], ["Raed", "Labes", "[email protected]"], ["Yezzi", "Min l3b", "[email protected]"] ];5 và <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript">script>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: "[email protected]" }, { firstname: "Raed", lastname: "Labes", email: "[email protected]" }, { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" } ];6 khi biết rằng chữ ký của nó là |
