Làm cách nào để xuất bảng HTML sang Excel bằng jQuery?

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 https://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

Làm cách nào để xuất bảng HTML sang Excel bằng jQuery?
Làm cách nào để xuất bảng HTML sang Excel bằng jQuery?

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. 38KB

Tả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

  
Company Contact Country
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


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

Làm cách nào để xuất bảng HTML sang XLSX bằng jQuery?

Đánh dấu HTML sau bao gồm một Bảng HTML và một Nút. Giải trình. Khi nhấp vào Nút Xuất, plugin jQuery table2excel được áp dụng cho Bảng HTML . Plugin jQuery table2excel chấp nhận tham số tên tệp đặt tên của tệp Excel.

Làm cách nào để xuất dữ liệu bảng HTML sang Excel bằng JavaScript?

Mã JavaScript ở trên tuân theo các bước đã cho để xuất bảng sang trang tính excel. .
Define a function “htmlTableToExcel()” in a .