-->
Home

Xuất dữ liệu trong bảng (HTML Table) ra file Excel bằng Javascript

Hieu Ho
Hieu Ho 2 comments
Xuất dữ liệu ra file Excel là một việc hữu dụng khi làm web, tính năng này giúp chúng ta tải về một file Excel cụ thể là csv, đầy đủ các dữ liệu trong HTML Table.

xuat-du-lieu-trong-bang-ra-file-excel-bang-javascript



Với bài viết này, mục đính muốn các bạn code ra được tính năng và một một phần khẳng định Javascript có thể làm được mọi thứ.

Live Preview



Tiến hành

Trước tiên các bạn tạo bảng và thêm dữ liệu, cụ thể HTML như sau:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML DOM - quochieu.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="font-sans w-full">
    <div class="p-4">
        <table id="exportMe" class="table">
              <thead>
                <tr>
                  <th scope="col"  data-type="number">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
        </table>

        <button class="border-none bg-blue-400 text-white px-3 py-2 mt-4" id="export">Export</button>
    </div>

</body>
</html>

Tiếp theo đó, là thêm javascript, thông qua các method sau đây:

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('exportMe');
    const exportBtn = document.getElementById('export');

    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 file xuống
    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);
    };

// kết nối tất cả các mảnh lại với nhau
    exportBtn.addEventListener('click', function() {
        // Export to csv
        const csv = toCsv(table);

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

Lời kết

Chỉ với vài bước đơn giản, bạn đã hoàn thành tính năng này, và sau ví dụ trên, các bạn một phần có thể hiểu tại sao javascript lại được sử dụng rộng rãi đến như vậy. Chính bản thân nó, sinh ra có thể làm tất cả.


Mong bài viết có ích với bạn. Chúc các bạn thành công.

By Hiếu Quốc

Có lẽ bạn thích?

2 comments

  1. Nguyễn LậpDecember 2, 2020 at 1:02 PM

    Bài viết hay. Cám ơn ad đã chia sẻ.
    Mình mới tạo blog. Ad ghé qua ủng hộ nhé. Thank's Ad
    blog.nguyenlap.top

    ReplyDelete

Post a Comment