Chức năng Export với bên thứ ba hoắc NPM lib

[hovanban]

Reac-csv là thư viện bên thứ ba mà chúng ta có thể sử dụng. Tất cả việc chúng ta cần làm là truyền dữ liệu và fileName và thư viện này sẽ lo phần còn lại cho chúng ta.
Chúng ta cần cài đặt Reac-csv trước và sau đó nhập nó trong component ExportCSV.

npm install react-csv --save

Nhập CSVLink từ react-csv và chuyển dữ liệu cần thiết và tên tệp vào liên kết đó như bên dưới.

import React from 'react'
import { CSVLink } from 'react-csv'
import Button from 'react-bootstrap/Button';
export const ExportReactCSV = ({csvData, fileName}) => {
return (
<Button variant="warning">
<CSVLink data={csvData} filename={fileName}>Export</CSVLink>
</Button>
)
}
Trong App component, tất cả những gì bạn cần làm là nhập ExportReactCSV thay vì ExportCSV.
import { ExportReactCSV } from './ExportReactCSV'
// removed code for the brevity

<div className="col-md-4 center">
<ExportReactCSV csvData={this.state.customers} fileName={this.state.fileName} />
</div>
}
}
export default App;
Tóm lược

• Chúng ta cần xsls và file-saver libs để thực hiện chức năng export trong React.
• Có một số cách bạn có thể triển khai logic export của mình trong React: một là sử dụng logic riêng, một cách khác là sử dụng bất kỳ lib bên thứ ba nào.
• Thực hiện logic export với component riêng biệt để có thể sử dụng lại và cũng có thể được nhập vào bất kỳ component nào để sử dụng nó.

CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn