LiuLyndon Look For: [JavaScript] JavaScript Excel

前篇介紹 DataTables.js

使用起來是非常完整的免費套件，呈現與匯出報表都沒有太多的問題
但遇到 thead 中有多個表頭需匯出像 Excel 這類的樣式，就會發生問題

如此篇所描述 Multiple thead 產出 Excel 的問題，回答也是很簡單，就是不支援 Multiple thead 匯出的方式

但在範例程式中 Complex headers (rowspan and colspan)，其實是有教學

Step 1. 參照此教學文進行測試

Step 2. 匯出 Excel 結果，只會顯示最後一組 thead

TableExport：HTML Table 內容匯出成各種格式的檔案，且也是 jQuery Plug-in

Step 1. 網站中有介紹需要安裝那些套件與套件的功能，主要安裝的有

John Resig - jQuery
tableexport
SheetJS - js-xlsx
Eli Grey - FileSaver.js

Step 2. 安裝

FileSaver 可由 NuGet 進行安裝
tableexport 與 SheetJS - js-xlsx 需使手動下載

Step 3. 將手動安裝的檔案加入專案中

Step 4. 加入相關程式，並設置一個按鍵


<!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" />
    <link href="~/Content/DataTables/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
    <!--TableExport-->
    <link href="~/Scripts/TableExport/dist/css/tableexport.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        <input type="button" id="BtnExportExcel" class="btn btn-default" value="Excel">
    </div>

    // 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.fixedColumns.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>
    <!--TableExport-->
    <script src="~/Scripts/SheetJS/xlsx.core.min.js"></script>
    <script src="~/Scripts/FileSaver.min.js"></script>
    <script src="~/Scripts/TableExport/dist/js/tableexport.min.js"></script>
    <script>
        $(function () {
            $('#example').DataTable({
                columnDefs: [{
                    visible: false,
                    targets: -1
                }],
                //dom: 'Bfrtip',
                //buttons: [
                //    'excelHtml5', 'pdfHtml5', 'print'
                //],
                fixedHeader: true,
                scrollY: 300,
                scrollX: true,
                scrollCollapse: true,
                searching: false,
                paging: false,
                ordering: false,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                }
                //info: false
            });

            $('#BtnExportExcel').click(function (e) {
                var ExportButtons = document.getElementById('example');

                var instance = new TableExport(ExportButtons, {
                    headers: true,                          
                    footers: false,                         
                    formats: ['xlsx'],                      
                    filename: 'DemoExcel',        
                    bootstrap: false,                       
                    exportButtons: false,                                   
                    ignoreRows: null,                       
                    ignoreCols: null,                       
                    trimWhitespace: true                    
                });

                //                                        "id" of selector, format
                var exportData = instance.getExportData()['example']['xlsx'];
                instance.export2file(exportData.data, exportData.mimeType, exportData.filename, exportData.fileExtension);
            });

        });
    </script>
</body>
</html>

Step 4. 匯出 Excel

成功的可抓取 Multiple thead，但匯出的欄位不會跨欄

LiuLyndon Look For

2017年9月22日星期五

[JavaScript] JavaScript Excel - TableExport.js

沒有留言:

張貼留言

2017年9月22日 星期五

[JavaScript] JavaScript Excel - TableExport.js

沒有留言:

張貼留言

2017年9月22日星期五