Chuyển đổi/Xuất giá trị từ bảng HTML sang Excel

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:

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the 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

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

Nguồn: niemvuilaptrinh.com

Bạn có muốn xác nhận hoàn thành bài học này không?

Xác nhận hoàn thành bài học

Bình luận bài viết

Đăng bình luận