Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Chuyển đổi từ bảng HTML sang Excel

Chuyển đổi từ bảng HTML sang Excel


Ngày 1 Tháng 2 Năm 2020

Chuyển đổi từ bảng HTML sang File Excel

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn đến một ứng dụng Jquery để chuyển đổi một bảng trong HTML sang một file Excel. Bây giờ hãy cùng nhau tìm hiểu nhé!

Chúng ta sẽ sử dụng plugin Table2Excel để chuyển đổi từ bảng sang file Excel. Các bạn nhấp vào đường dẫn bên dưới để tải file Javascript về nhé!
Download File Table2Excel

Sau đó các bạn sẽ giải nén file và tạo ra cấu trúc thư mục cây như sau:

Table2Excel

Các bạn nhập đoạn code này vào trangchinh.html:

<!doctype html> 
<html lang="en">
<head>
<title>Trang Chính</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.table2excel.min.js"></script>
</body>
</html>

Sau khi đã thêm được file jquery.table2excel.min.js vào trang HTML thì bạn nhập một bảng như ví dụ sau đây:

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter


Với đoạn code như hình dưới đây và các bạn cần lưu ý là đặt id cho bảng là id="table2excel" :

<table class="table" id="table2excel">
<thead class="thead-dark">
<tr>
<th scope="col">#</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="btn btn-success">Xuất File Excel<button>

Sau khi đã thiết lập bảng xong thì bạn bắt đầu nhập code để chuyển đổi từ Bảng sang Excel:

<script>
$("button").click(function(){
$("#table2excel").table2excel({
name: "Worksheet Name",
filename: "FileExcel",
fileext: ".xls"
})
});
</script>

Một số mà bạn cần lưu ý trong đoạn code trên:

  • filename là tên để đặt cho Tên của File Excel
  • fileext là đuôi mà chúng ta muốn xuất dưới dạng Excel

Sau khi đã nhập thành công thì bạn thử nhấn vào nút Xem Kết Quả để thấy thành quả nhé!

Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục table2excel để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây bạn đã có thể tạo được một File Excel từ một bảng HTML. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!