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:
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:
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter Xuất File Excel
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é! Xem Kết Quả
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ẻ!
Xin chào chúng mình là Gen Z. Thế hệ tuổi trẻ Gen Z chúng mình chia sẻ cho nhau những bài viết bổ ích giúp nhằm mục đích phi lợi nhuận và cùng nhau phát triển bản thân về cả tri thức lẫn tinh thần. Nếu bạn đam mê viết lách và chia sẻ câu chuyện cá nhân của bạn trên nền tảng internet hãy gửi tin nhắn đến cho chúng mình cùng gia nhập cộng đồng cùng nhau học hỏi và chia sẻ kiến thức nhé