- 最近因需求需將報表呈現在網頁中，因此找尋網路上的套件
- Handsontable：提供最詳細的功能，Excel 基本的功能都已經包含在裡面，並且提供完整的範例程式，但免費版的功能砍掉許多，收費版本費用也不便宜
- DataTables：推薦此套件，提供完整的範例程式，是由 jquery 延伸的套件且支持 bootstrap 樣版，重點免費，所更新的速度也是很穩定，下列介紹如何在 MVC 中使用
- Step 1. 安裝 JQuery, DataTables, Bootstrap, JSZip, pdfmake
- Step 2. 套用 bootstrap，需使用 dataTables.bootstrap
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
// Table Data ...
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
$('#example').DataTable({
fixedHeader: true,
scrollY: 300,
paging: false,
ordering: false,
//info: false
});
});
</script>
</body>
</html>
- Step 3. 匯出 Excel, PDF, Print
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.min.css" rel="stylesheet" />
</head>
<body>
// Table Data ...
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="~/Scripts/jszip.min.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.min.js"></script>
<script src="~/Scripts/DataTables/buttons.print.min.js"></script>
<script>
$(function () {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'excelHtml5', 'pdfHtml5', 'print'
],
fixedHeader: true,
scrollY: 300,
search: false,
paging: false,
ordering: false,
//info: false
});
});
</script>
</body>
</html>
沒有留言:
張貼留言