1. 程式人生 > >AngularJs 中將表格匯出生成Excel表

AngularJs 中將表格匯出生成Excel表

工程結構如下圖:

這裡寫圖片描述

直接貼程式碼:

1,views: usageTracking.html

<div class="wisdomPark-ui-form list"
    data-ng-controller=" usageTrackingController as usageTrackingCtrl">
    <section class="wisdomPark-ui-wrap">
        <div class="wisdomPark-ui-wrap-header">
            <span>查詢條件</span>
            <div
class="col-xs-3 fr"> <button data-ng-click="usageTrackingCtrl.ToExcel('ta')" class="wisdomPark-ui-btn wisdomPark-ui-btn-red">匯出</button> </div> </div> <div class="collapse in"> <div class
="wisdomPark-ui-wrap-body"> <div class="row"> <div class="col-xs-12"> <table id="ta" width="852" border="0" > </table> </div> </div> </div
> </div> </section> </div>

2, services:usageTrackingService.js

/**
 * sampleService
 */
(function() {
    'use strict';
    angular.module('app.usagetracking').service('usageTrackingService', usageTrackingService);

    usageTrackingService.$inject = [ '$filter', '$q', 'httpService' ];

    function usageTrackingService($filter, $q, httpService) {

        this.getAllDataCount = getAllDataCount;
        this.ToExcel = ToExcel;



        /**
         * 查詢 全平臺業務資料總數 
         */
        function getAllDataCount(param) {
            return httpService.http({
                domain : "saas-usage-tracking",
                url : "innodb/getAllDataCount",
                method : "POST",
                data : null,
                successCallback : function(msg) {
                    // 如有需要在此操作
                }
            });
        }



         /**
         *匯出Excel檔案
         */

        var idTmr;
        function getExplorer() {
            var explorer = window.navigator.userAgent;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if (explorer.indexOf("Chrome") >= 0) {
                return 'Chrome';
            }
            //Opera
            else if (explorer.indexOf("Opera") >= 0) {
                return 'Opera';
            }
            //Safari
            else if (explorer.indexOf("Safari") >= 0) {
                return 'Safari';
            }
        }
        function ToExcel(tableid) {
            //整個表格拷貝到EXCEL中
            if (getExplorer() == 'ie') {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                //建立AX物件excel
                var oWB = oXL.Workbooks.Add();
                //獲取workbook物件
                var xlsheet = oWB.Worksheets(1);
                //啟用當前sheet
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的內容移到TextRange中
                sel.select;
                //全選TextRange中內容
                sel.execCommand("Copy");
                //複製TextRange中內容
                xlsheet.Paste();
                //貼上到活動的EXCEL中
                oXL.Visible = true;
                //設定excel可見屬性
                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
                            "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);
                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //結束excel程序,退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);
                }
            } else {
                tableToExcel('ta');
            }   
        //return 1;
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function(
                    s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }, format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            }
            return function(table, name) {
                if (!table.nodeType)
                    table = document.getElementById(table)
                var ctx = {
                    worksheet : name || 'Worksheet',
                    table : table.innerHTML
                }
                window.location.href = uri + base64(format(template, ctx))
            }
        })(); 
        //end of "匯出Excel檔案 "



    }
})();

3,controllers:usageTrackingControllerLists.js

(function() {
    'use strict';
    angular.module('app.usagetracking').controller('usageTrackingController',
            usageTrackingController);

    usageTrackingController.$inject = [ '$scope', '$timeout', '$state',
            '$stateParams', 'usageTrackingService', 'httpService',
            'listgridService', 'notificationService', 'i18nService' ];

    function usageTrackingController($scope, $timeout, $state, $stateParams,
            usageTrackingService, httpService, listgridService,
            notificationService, i18nService) {
        var vm = this;
        activate();
        function activate() {
            vm.dataList = [];
            i18nService.setCurrentLang('zh-cn');
            vm.searchParam = {
                page : 1,
                pageSize : 10,
                sortParamList : []
            };

            vm.allDataCount = 0;

             httpService.processHttp(
                        usageTrackingService.getAllDataCount,
                        null,
                        function(data){
                            vm.allDataCount = data;
                        }
                    );

            /**
             * 資料匯出成Excel
             */
            vm.ToExcel = function(tableId) {

                setTimeout(function() {
                    usageTrackingService.ToExcel(tableId);

                }, 1000);

            }

        }
    }
})();