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

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 hướng dẫn này, bạn có thể tìm thấy giải pháp về Cách xuất hoặc tải xuống dữ liệu bảng HTML trong trang tính Excel bằng cách sử dụng JavaScript. Xuất dữ liệu sang Excel là tính năng bắt buộc trong ứng dụng web của chúng tôi. Bởi vì chức năng xuất dữ liệu sẽ giúp tải dữ liệu từ ứng dụng web sang định dạng tệp khác để sử dụng dữ liệu ngoại tuyến và đối với định dạng excel này là lý tưởng để xuất dữ liệu trong tệp để sử dụng ngoại tuyến. Có nhiều hướng dẫn chúng tôi đã xuất bản để xuất dữ liệu thành excel ở phía máy chủ bằng cách sử dụng PHP. Nhưng nếu chúng ta có thể thực hiện ở phía máy khách để xuất dữ liệu sang bảng tính Excel, thì nó sẽ giảm tải cho máy chủ. Vì vậy, đối với điều này để xuất dữ liệu sang excel, ở đây chúng tôi sẽ sử dụng JavaScript để thực hiện xuất dữ liệu phía máy khách sang bảng excel

Tính năng xuất phía máy khách sẽ làm cho ứng dụng web của chúng tôi thân thiện hơn với người dùng. Vì vậy, với sự trợ giúp của JavaScript, chúng tôi có thể xuất dữ liệu bảng HTML sang định dạng Excel mà không cần làm mới trang web. Trong hướng dẫn này, bạn có thể tìm hiểu Cách xuất dữ liệu bảng HTML sang excel bằng JavaScript. Trong hướng dẫn này, chúng tôi sẽ sử dụng Thư viện JavaScript SheetJS để xuất dữ liệu bảng HTML sang Excel

Các bước để xuất dữ liệu bảng HTML sang Excel bằng JavaScript

1. Dữ liệu bảng HTML
2. Mã JavaScript

1. Dữ liệu bảng HTML

Để Xuất dữ liệu HTML sang Excel, ở đây trước tiên chúng ta phải tải một số dữ liệu trong bảng HTML. Vì vậy, ở đây chúng tôi đã tạo dữ liệu bảng nhân viên tìm nạp và tải vào bảng HTML với cột bảng như tên, địa chỉ, giới tính, chỉ định và tuổi. Ở đây chúng tôi đã tạo bảng HTML với id employee_data. Vì vậy, id này chúng tôi sẽ sử dụng để tìm nạp dữ liệu bảng HTML này bằng mã JavaScript. Trong đoạn mã HTML này chúng ta đã tạo một thẻ button với id export_button nên khi sử dụng có click vào button này thì dữ liệu bảng HTML sẽ được tải xuống dưới dạng file Excel mà không cần refresh lại trang web bằng JavaScript

Xem bản trình diễn

Tải xuống mã nguồn

query($query);

?>




	
	
	
    

    


    

    	
Export HTML table data to excel using JavaScript
    	

    		

    			

    				
Sample Data
    				

    					Export
    				
    			
    		
    		

    			
';
}
?>

                    

                        
Name
                        
Address
                        
Gender
                        
Designation
                        
Age
                    
                    
                            
'.$row["name"].'
                            
'.$row["address"].'
                            
'.$row["gender"].'
                            
'.$row["designation"].'
                            
'.$row["age"].'
                        

2. Mã JavaScript

Trong hướng dẫn này, chúng tôi đã sử dụng Thư viện JavaScript SheetJS để xuất dữ liệu bảng HTML sang Excel bằng JavaScript. Vì vậy, trước tiên chúng ta phải bao gồm liên kết thư viện SheetJS sau ở tiêu đề của trang web HTML này

Trong phần code JavaScript, đầu tiên chúng ta có hàm make html_table_to_excel(type). Chức năng này đã sử dụng chức năng Thư viện SheetJS và chuyển đổi hoặc Viết dữ liệu bảng HTML sang định dạng Excel và tải xuống trong trình duyệt mà không cần làm mới trang web

Khi chức năng đã sẵn sàng thì chúng ta phải gọi hàm html_table_to_excel(type) trên sự kiện nhấp vào nút, vì vậy đối với sự kiện nhấp vào nút kích hoạt, chúng tôi đã sử dụng phương thức addEventListener. Vì vậy, khi người dùng đã nhấp vào nút thì hàm html_table_to_excel(type) đã được gọi với loại tệp xlsx. Vì vậy, nó sẽ tải xuống dữ liệu bảng HTML trong. tệp Excel định dạng xlsx trong trình duyệt mà không cần làm mới trang web ở phía máy khách

function html_table_to_excel(type)
    {
        var data = document.getElementById('employee_data');

        var file = XLSX.utils.table_to_book(data, {sheet: "sheet1"});

        XLSX.write(file, { bookType: type, bookSST: true, type: 'base64' });

        XLSX.writeFile(file, 'file.' + type);
    }

    const export_button = document.getElementById('export_button');

    export_button.addEventListener('click', () =>  {
        html_table_to_excel('xlsx');
    });

Phần kết luận

Hướng dẫn này sẽ giúp bạn thêm tính năng xuất dữ liệu bảng HTML tải xuống trong trang tính Excel mà không cần sử dụng plugin jQuery của bên thứ ba hoặc bất kỳ tập lệnh phía máy chủ nào. Bằng cách làm theo hướng dẫn này, bạn có thể dễ dàng xuất dữ liệu bảng HTML sang Excel bằng cách sử dụng mã JavaScript tối thiểu

Nếu bạn muốn có được nguồn hoàn chỉnh với. sql, vì vậy vui lòng viết địa chỉ email của bạn vào hộp nhận xét. Chúng tôi sẽ gửi cho bạn tệp mã nguồn hoàn chỉnh tại địa chỉ email xác định của bạn

Làm cách nào để xuất 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

programming javascript

Reply 2 0 Chia sẻ