Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn đến một ứng dụng Jquery để chuyển đổi một bảng trong HTML sang một file Excel. Bây giờ hãy cùng nhau tìm hiểu nhé!
Chúng ta sẽ sử dụng plugin Table2Excel để chuyển đổi từ bảng sang file Excel. Các bạn nhấp vào đường dẫn bên dưới để tải file Javascript về nhé!
Download File Table2Excel
Sau đó các bạn sẽ giải nén file và tạo ra cấu trúc thư mục cây như sau:
Các bạn nhập đoạn code này vào trangchinh.html:
Trang Chính
Sau khi đã thêm được file jquery.table2excel.min.js vào trang HTML thì bạn nhập một bảng như ví dụ sau đây:
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
Với đoạn code như hình dưới đây và các bạn cần lưu ý là đặt id cho bảng là id="table2excel" :
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
< button class="btn btn-success">Xuất File ExcelSau khi đã thiết lập bảng xong thì bạn bắt đầu nhập code để chuyển đổi từ Bảng sang Excel:
$["button"].click[function[]{
$["#table2excel"].table2excel[{
name: "Worksheet Name",
filename: "FileExcel",
fileext: ".xls"
}]
}];
Một số mà bạn cần lưu ý trong đoạn code trên:
- filename là tên để đặt cho Tên của File Excel
- fileext là đuôi mà chúng ta muốn xuất dưới dạng Excel
Sau khi đã nhập thành công thì bạn thử nhấn vào nút Xem Kết
Quả để thấy thành quả nhé!
Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục table2excel để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code
Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm
Tổng kết:
Qua đây bạn đã có thể tạo được một File Excel từ một bảng HTML. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:
- Example Project
- Điều kiện tiên quyết
- Thực hiện chức năng export
- Chức năng Export với bên thứ ba hoắc NPM lib
- Tóm lược
- Kết luận
1. Example project
Đây là một ứng dụng đơn giản với dữ liệu bảng và nút xuất ở góc trên cùng bên phải. Khi bạn bấm vào nút, dữ liệu từ bảng sẽ được tải xuống trong một bảng excel.
4. Chức năng Export với bên thứ ba hoắc NPM lib
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 [
Export
]
}
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
}
}
export default App;
5. 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ó.
6. Phần kết luận
Có một số libs bên thứ ba hoặc npm để sử dụng ngay . Nhưng, đôi khi chúng ta phải tạo component riêng cho chức năng export để có thể linh hoạt hơn và các cho 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 //blog.bitsrc.io/exporting-data-to-excel-with-react-6943d7775a92