Mã bên dưới sẽ hoạt động trên Chrome, Edge, Firefox mới nhất, không yêu cầu thư viện của bên thứ 3
HTML
Export as CSV
tập lệnh
function download_table_as_csv[table_id, separator = ','] {
// Select rows from table_id
var rows = document.querySelectorAll['table#' + table_id + ' tr'];
// Construct csv
var csv = [];
for [var i = 0; i < rows.length; i++] {
var row = [], cols = rows[i].querySelectorAll['td, th'];
for [var j = 0; j < cols.length; j++] {
// Clean innertext to remove multiple spaces and jumpline [break csv]
var data = cols[j].innerText.replace[/[\r\n|\n|\r]/gm, ''].replace[/[\s\s]/gm, ' ']
// Escape double-quote with double-double-quote [see //stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv]
data = data.replace[/"/g, '""'];
// Push escaped string
row.push['"' + data + '"'];
}
csv.push[row.join[separator]];
}
var csv_string = csv.join['\n'];
// Download it
var filename = 'export_' + table_id + '_' + new Date[].toLocaleDateString[] + '.csv';
var link = document.createElement['a'];
link.style.display = 'none';
link.setAttribute['target', '_blank'];
link.setAttribute['href', 'data:text/csv;charset=utf-8,' + encodeURIComponent[csv_string]];
link.setAttribute['download', filename];
document.body.appendChild[link];
link.click[];
document.body.removeChild[link];}
Trong bài viết này, chúng ta sẽ tìm hiểu cách chuyển đổi một bảng HTML thành một trang tính Excel bằng cách sử dụng jQuery và plugin jQuery. Trong phần này, trước tiên, chúng ta biết cấu trúc bảng HTML một cách chi tiết. Việc chuyển đổi bảng HTML sang bảng Excel có lợi cho người dùng tạo báo cáo excel. Nó giúp chúng tôi tiết kiệm thời gian và tránh những sai sót trong khi tạo báo cáo
Sau đây là các ví dụ khác nhau về chuyển đổi bảng HTML thành Excel bằng jQuery
ví dụ 1
Giải trình
Trong ví dụ trên, chúng tôi đã tạo một ví dụ về cách chuyển đổi bảng html thành trang tính excel bằng cách sử dụng plugin jQuery. Trong phần này, chúng tôi đã tải xuống tên tệp plugin jquery. bảng2excel. js và thêm nó vào phần tiêu đề của tài liệu. Trong này, chúng tôi có một nút để tải mã html sang định dạng excel. Trong phần này, bảng excel được tải xuống với tên được tạo bởi mẫu này
3 là một plugin jQuery nhẹ giúp bạn xuất bảng HTML sang tệp Excel
4. Nó chuyển đổi dữ liệu bảng thành trang tính Excel và buộc trình duyệt tải xuống tệp đã tạo
Plugin cũng có thể xuất bảng HTML thành tệp TXT, JSON hoặc PDF. Nhưng trong hướng dẫn này, chúng tôi sẽ tập trung vào xuất Excel bằng cách sử dụng plugin jQuery này
Bản xem trước plugin
Chia sẻ cái này
Làm thế nào để bắt đầu sử dụng jQuery?
Thêm các plugin hàng đầu, tốt nhất và mới nhất của jQuery
100 plugin jQuery hàng đầu
Tổng quan về plugin
Cắm vào. TableHTMLExport Tác giả. Giấy phép Furioso Jack. Giấy phép MITXuất bản. Ngày 25 tháng 11 năm 2022Kho lưu trữ. Ngã ba trên phụ thuộc GitHub. jQuery1. 3. 1 hoặc Phiên bản mới nhất và Phông chữ tuyệt vời 4 [Tùy chọn] Loại tệp. kho lưu trữ zip [HTML, CSS & JavaScript ]Kích thước gói. 7. 38KBTải xuống bản trình diễn
Cách sử dụng Plugin jQuery để xuất bảng HTML sang Excel
1. Để tạo chức năng xuất bảng, trước hết hãy tải thư viện jQuery JavaScript và tệp JS plugin
3 vào tài liệu HTML của bạn
Mẹo. Bạn cũng có thể tải plugin thông qua CDN vào dự án của mình
2. Thêm một id [hoặc lớp] duy nhất vào bảng HTML của bạn mà bạn muốn xuất thành trang tính excel
CodeHim | Maria Anders | Germany |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
3. Bây giờ, hãy tạo một nút sẽ được sử dụng để xuất bảng HTML của bạn thành tệp Excel
4
Export to Excel
Ghi chú.
7 yêu cầu tệp Font Awesome CSS để hiển thị biểu tượng tệp excel trong nút xuất
3. 1 Cũng Load Font Awesome nếu chưa làm
4. Tạo kiểu cho bảng HTML của bạn và nút xuất bằng CSS [Tùy chọn]
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child[even]{background-color: #f2f2f2} th, .export-btn { background-color: #81BD5D; color: #fff; } .export-btn{ padding: 10px 16px; border: 0; outline: 0; font-size: 18px; border-radius: 4px; margin: 10px auto; cursor: pointer; } .export-btn:hover{ opacity: 0.9; }
5. Cuối cùng, khởi tạo plugin trong chức năng sẵn sàng cho tài liệu jQuery
Mẹo. Sử dụng sự kiện nhấp để xuất tệp khi nhấp vào nút. Nếu không, tệp sẽ được tải xuống khi tải nội dung