Phản ứng xuất mã excel-excelandbox
Có một số điều kiện quyết định đầu tiên cho hướng dẫn này. Bạn cần tạo một dự án React với ứng dụng tạo-ứng dụng phản ứng và cần cài đặt các gói npm xslx, bootstrapand file-saver
You have to add stylesheets from the library React Bootstrap in 2
Tạo tiêu đề cho Header
Tạo bảng khách hàngPlease create a component table Khách hàng. Đây là một trình bày thành phần trong đó đưa ra các khách hàng làm props và renders làm bảng
Truyền dữ liệu từ thành phần Ứng dụngChúng ta nên chuyển dữ liệu được hiển thị trong bảng từ thành phần Ứng dụng như bên dưới và chúng ta cũng cần nhập thành phần Khách hàng và Tiêu đề để sử dụng các dữ liệu trong chức năng kết xuất
Ứng dụng của bạn sẽ giống như thế này. 3. Thực hiện các chức năng xuất khẩuPlease create a component has name is ExportCSV which get data doing props and quan tâm đến phần còn lại của chức năng export. Đây là thành phần với phương thức exportToCSV để xử lý tất cả các chức năng tải xuống excel với xlxs và trình tiết kiệm tệp
Thành phần này là một thành phần trình bày lấy dữ liệu để tải xuống và tên tệp làm đạo cụ. Phương thức exportToCSV được gọi khi nhấp vào nút xuất You must enter this component in App component
Màn hình sau đây là màn hình cuối cùng sau khi chúng tôi bổ sung tất cả các chức năng trên và sẵn sàng hoạt động. 3 là thư viện bên thứ ba mà chúng ta có thể sử dụng. Tất cả công việc chúng ta cần làm là truyền dữ liệu và tên tệp và thư viện này sẽ mất phần còn lại cho chúng taChúng ta cần cài đặt 3 trước và sau đó nhập nó vào thành phần ExportCSV
Nhập CSVLink từ Reac-csv và chuyển dữ liệu cần thiết và đặt tên tệp vào liên kết đó như bên dưới
Trong thành phần Ứng dụng, tất cả những gì bạn cần làm là nhập vào 5 thay vì 6 05. Tóm tắt
Có một số lib bên thứ ba hoặc npm để sử dụng ngay. Nhưng đôi khi chúng ta phải tạo thành phần riêng cho chức năng xuất để có thể hoạt động linh hoạt hơn và các mục đích khác như lý do bảo mật. Cảm ơn các bạn đã theo dõi. Trong bài viết có tham khảo tại https. //Blog. bitrc. io/xuất-dữ-liệu-to-excel-with-Reac-6943d7775a92 |