Video học lập trình mỗi ngày

Export a table to csv using javascript - Ở đâu đó có thể có nhiều devjs vẫn chưa hình dung được vì sao javascript lại được sử dụng rộng rãi đến như vậy. Từ database, backend, front-end. Và đây là một ví dụ về javascript có thể làm được mọi thứ.

Xem link demo Export a table to csv using javascript dưới bài viết

Việc export một dữ liệu sang file csv, bạn sẽ không cần một thư viện nào khiến web của bạn trở nên nặng nhọc hơn. Mà thay vào đó bạn có thể sử dụng vanilla javascript

Giả sử chúng ta có một table chứa những item csv trong những tag

    
table id="exportMe" class="table"
...
table

button id="export" Export button

Export the table cells to CSV

Hàm bên dưới xuất tất cả các ô của bảng sang định dạng CSV. Đầu tiên, chúng tôi chọn tất cả các hàng, lặp qua chúng và xuất từng hàng sang CSV. Trong mỗi hàng, chúng tôi đi qua tất cả các ô và lấy lại nội dung văn bản của chúng.

const toCsv = function(table) {
    // Query all rows
    const rows = table.querySelectorAll('tr');

    return [].slice.call(rows)
        .map(function(row) {
            // Query all cells
            const cells = row.querySelectorAll('th,td');
            return [].slice.call(cells)
                .map(function(cell) {
                    return cell.textContent;
                })
                .join(',');
        })
        .join('\n');
};

Download the CSV

Hàm bên dưới tạo một phần tử giả có nội dung là văn bản và kích hoạt sự kiện nhấp chuột. Để biết thêm thông tin, bạn có thể truy cập  Download a file.

const download = function(text, fileName) {
    const link = document.createElement('a');
    link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`);
    link.setAttribute('download', fileName);

    link.style.display = 'none';
    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
};

Điều cuối cùng là kết nối tất cả các mảnh lại với nhau. Chúng ta chỉ cần xử lý sự kiện click export button:

const table = document.getElementById('exportMe');
const exportBtn = document.getElementById('export');

exportBtn.addEventListener('click', function() {
    // Export to csv
    const csv = toCsv(table);

    // Download it
    download(csv, 'download.csv');
});

Xem: Demo (source)

Full code: Github link