1. 程式人生 > >列印預覽:print

列印預覽:print

一、函式
    function printed(){
        $.ajaxPrint({
            url: '<g:createLink controller="oneLevel" action="print"/>',
            title: '資金清分報表',
            data: {
                flage: '${params.flage}'
            },
            fields: [
                {
                    title: '日期',
                    field: 'tDate'
                },
                {
                    title: '訂單筆數',
                    field: 'orderNum',
                    sum:true
                },
                {
                    title: '商品總數',
                    field: 'goodsSum',
                    sum:true
                },
                {
                    title: '訂單總金額(元)',
                    field: 'orderMoneySum',
                    sum:true
                },
                {
                    title: '抵扣金額(元)',
                    field: 'discountMoney',
                    sum:true
                },
                {
                    title: '實付金額(元)',
                    field: 'realPayMoney',
                    sum:true
                },
                {
                    title: '退貨筆數',
                    field: 'backNum',
                    sum:true
                },
                {
                    title: '退貨金額(元)',
                    field: 'backMoney',
                    sum:true
                },
                {
                    title: '總筆數',
                    field: 'totalNum',
                    sum:true
                },
                {
                    title: '總金額(元)',
                    field: 'totalMoney',
                    sum:true
                }
            ]
        });
    }

二、外掛 print.js
/**
 * 非同步列印
 * @author Monster
 * @param object 引數
 * @returns
 */
$.ajaxPrint = function(object) {
    //必須指定URL
    if(object != undefined && object != null) {
        if (object.title == undefined ||
            object.title == '' ||
            object.title == null) {
            alert("未指定標題名");
            return;
        }

        //去除重複UI引數
        var tag = false;
        if (object.easygrid != undefined &&
            object.easygrid != '' &&
            object.easygrid != null) {
            delete object.jqgrid;
            delete object.ligergrid;
            tag = true;
        }
        if(!tag) {
            if (object.ligergrid != undefined &&
                object.ligergrid != '' &&
                object.ligergrid != null) {
                delete object.jqgrid;
                delete object.easygrid;
                tag = true;
            }
        }
        if(!tag) {
            if (object.jqgrid != undefined &&
                object.jqgrid != '' &&
                object.jqgrid != null) {
                delete object.ligergrid;
                delete object.easygrid;
                tag = true;
            }
        }

    }
    window.printParams = object;
    window.open("/VEMManage/print");
};

三、頁面 print.jsp
<%--
  Created by IntelliJ IDEA.
  User: Monster
  Date: 2015/3/26
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title> </title>
</head>
<style type="text/css">

    table {
        width: 98%;
        min-width: 768px;
    }

    table th {
        height: 28px;
        font-size: 18px;
        background-color: #777777;
        text-align: center;
        font-weight: bold;
        font-family: "微軟雅黑", "宋體", Arial, sans-serif;
    }

    table td {
        height: 18px;
        border: 1px #777777 solid;
        text-align: center;
        font-size: 8px;
        padding-left: 1px;
        padding-right: 1px;
    }

    div, table, table tr {
        text-align: center;
        margin: auto;
    }

    @media print {
        table {
            page-break-after: auto
        }

        tr {
            page-break-inside: avoid;
            page-break-after: auto
        }

        td {
            page-break-inside: avoid;
            page-break-after: auto
        }

        thead {
            display: table-header-group
        }

        tfoot {
            display: table-footer-group
        }
    }
</style>
<body>
</div>
<div id="printContent">
    <table id="print_table" cellspacing="0" cellpadding="0" align="center">
        <thead>
            <tr>
                <th id="themeName"></th>
            </tr>
            <tr>
                <td id="operatorName" style="border: 0px; text-align: left">製表人:<span id="operator"></span></td>
                <td id="position" style="border: 0px;"></td>
            </tr>
        </thead>
        <tbody id="columnTitle">
        </tbody>
        <tfoot>
        <tr>
            <td id="tabName" style="border: 0px; text-align: left">製表時間:<span id="tabTime"></span></td>
            <td id="positionTab" style="border: 0px;"></td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
<asset:javascript src="jquery/jquery.min.js"/>
<script>
    $(function () {
        var object = window.opener.printParams;
        if (object != undefined) {
            sendAjax(object);
        }
        if (object.operator != undefined) {
            setOperator(object.operator);
        } else {
            var operator = "${grails.plugin.springsecurity.SpringSecurityUtils.getLastUsername(session)}";
            if (operator != "") {
                setOperator(operator);
            }
        }
        setThemeName(object.title);
        setTabTime();
    });

    /** 標題列ID*/
    var $columnTitle = $('#columnTitle');

    /**
     * 預設設定編號
     */
    function createArray() {
        var columnArray = new Array();
        var column = {};
        column['title'] = '編號';
        column['field'] = 'index';
        columnArray.push(column);
        return columnArray;
    }

    /** 獲取ligergrid 標題名稱*/
    function getLigerGridColumns(ligergrid) {
        /*var columns = $('#ligergrid').ligerGrid('getColumns');*/
        var columnArray = new Array();
        for (var i = 0; i < ligergrid.length; i++) {
            var col = ligergrid[i];
            var display = col.display;
            var columnname = col.columnname;
            if (display != undefined &&
                    columnname != undefined && !col.hide) {
                var column = {};
                column['title'] = display;
                column['field'] = columnname;
                if (col.render != undefined) {
                    column['format'] = col.render;
                }
                if (col.sum != undefined && col.sum) {
                    column['sum'] = col.sum;
                    column['sumValue'] = 0;
                }
                columnArray.push(column);
            }
        }
        return columnArray;
    }

    /**
     * 獲取easygrid 標題名稱
     * @author Monster
     * */
    function getEasyGridColumns(easygrid) {
        /*var columns = $(easygrid).datagrid('options').columns[0];*/
        var columnArray = new Array();
        for (var i = 0; i < easygrid.length; i++) {
            var col = easygrid[i];
            var title = col.title;
            var field = col.field;
            if (title != undefined &&
                    field != undefined && !col.hidden) {
                var column = {};
                column['title'] = title;
                column['field'] = field;
                if (col.formatter != undefined) {
                    column['format'] = col.formatter;
                }
                if (col.sum != undefined && col.sum) {
                    column['sum'] = col.sum;
                    column['sumValue'] = 0;
                }
                columnArray.push(column);
            }
        }
        return columnArray;
    }


    /** 獲取jqgrid 標題名稱*/
    function getJQGridColumns(jqgrid) {
        /*var cols = $("#jQGrid").jqGrid('getGridParam', 'colModel');*/
        var columnArray = new Array();
        for (var i = 0; i < jqgrid.length; i++) {
            var col = jqgrid[i];
            var label = col.label;
            var name = col.name;
            if (label != undefined &&
                    name != undefined && !col.hidden) {
                var column = {};
                column['title'] = label;
                column['field'] = name;
                if (col.formatter != undefined) {
                    column['format'] = col.formatter;
                }
                if (col.sum != undefined && col.sum) {
                    column['sum'] = col.sum;
                    column['sumValue'] = 0;
                }
                columnArray.push(column);
            }
        }
        return columnArray;
    }

    /** 裝載資料*/
    function sendAjax(object) {
        var ajaxParams = {};
        var data = {};
        if (object.easygrid != undefined) {
            ajaxParams['url'] = object.easygrid.url;
            data = object.easygrid.queryParams;
            if (object.rows == undefined) {
                data['rows'] = 5000;
            } else {
                data['rows'] = object.rows
            }
            if (object.page == undefined) {
                data['page'] = 1;
            } else {
                data['page'] = object.page;
            }
            ajaxParams['data'] = data;
        } else if (object.jqgrid != undefined) {
            if (object.rows == undefined) {
                data['rows'] = 5000;
            } else {
                data['rows'] = object.rows
            }
            if (object.page == undefined) {
                data['page'] = 1;
            } else {
                data['page'] = object.page;
            }
            ajaxParams['data'] = data;
        } else if (object.ligergrid != undefined) {
            if (object.pagesize == undefined) {
                data['pagesize'] = 5000;
            } else {
                data['pagesize'] = object.pagesize
            }
            if (object.page == undefined) {
                data['page'] = 1;
            } else {
                data['page'] = object.page;
            }
            ajaxParams['data'] = data;
        }
        //如果有設定如下引數則複用UI裡的引數
        if (object.url != undefined) {
            ajaxParams['url'] = object.url;
        }
        if (object.data != undefined) {
            ajaxParams['data'] = object.data;
        }
        if (object.dataType != undefined) {
            ajaxParams['dataType'] = object.dataType;
        } else {
            ajaxParams['dataType'] = 'json';
        }
        if (object.contentType != undefined) {
            ajaxParams['contentType'] = object.contentType;
        }
        ajaxParams['success'] = function (data) {
            processData(data, object);
        };
        $.ajax(ajaxParams);
    }

    /**
     * 獲取物件中的所有Key
     */
    function getKeys(rows) {
        var keys = [];
        if (rows != null && rows != undefined
                && rows.length > 0) {
            keys = Object.keys(rows[0]);
        }
        return keys;
    }

    /**
     * 驗證資料不為空,未定義
     */
    function validateValue(columnValue) {
        if (columnValue != null &&
                columnValue != undefined) {
            return true;
        }
        return false;
    }

    /**
     * 驗證列值,是否為整數和浮點數
     */
    function validateNumber(columnValue) {
        if (!columnValue) {
            return false;
        }

        //驗證浮點數
        var reg = /^\d+(\.\d+)?$/;
        if (!reg.test(columnValue)) {
            return false;
        }
        try {
            //如果是字元或其他型別,則不是浮點數
            if (parseFloat(columnValue) != columnValue) {
                return false;
            }
        } catch (ex) {
            return false;
        }
        return true;
    }

    /**
     * 在沒有指定fields時或者三種UI時,設定資料行
     */
    function setCustomColumnDatas(rows, keys) {
        setColumnTitles(keys);
        for (var idx in rows) {
            var row = rows[idx];
            var html = '<tr>';
            keys.forEach(function (column) {
                var columnValue = row[column];
                if (validateValue(columnValue)) {
                    html += '<td>' + row[column] + '</td>';
                } else {
                    html += '<td></td>';
                }
            });
            html += '</tr>';
            $columnTitle.after(html);
        }
    }
    /**
     * 在指定UI時, 設定資料行
     */
    function setColumnDatas(rows, columnArray) {
        setColumnTitles(columnArray);
        var html = "";
        var length = rows.length;
        for (var index = 0; index < length; index++) {
            var row = rows[index];
            html += "<tr id='" + (index + 1) + "'>";
            columnArray.forEach(function (columnDef) {
                if (columnDef.format != undefined) {
                    columnValue = columnDef.format(row[columnDef.field], row, index);
                } else {
                    var columnValue = row[columnDef.field];
                }
                if (columnValue == undefined) {
                    columnValue = '';
                }
                //如果以上取得值不為未定義
                var sum = columnDef.sum;
                //驗證統計值
                if (sum != undefined && sum == true &&
                        columnValue != '' && validateNumber(columnValue)) {
                    columnDef.sumValue += columnValue;
                }
                html += "<td>" + columnValue + "</td>"
            });
            html += "</tr>";
        }
        $columnTitle.after(html);
        setColumnSum(columnArray, length);
    }

    /** 設定標題*/
    function setColumnTitles(columnArray) {
        var length = columnArray.length;
        for (var i = 0; i < length; i++) {
            var title = columnArray[i].title;
            if (title != undefined) {
                $columnTitle.append('<td>' + title + '</td>');
            } else {
                $columnTitle.append('<td>' + columnArray[i] + '</td>');
            }
        }
        $("#themeName").attr('colspan', length);
        $("#operatorName").attr('colspan', length - 1);
        $("#operator").attr('colspan', 1);
        $("#position").attr('colspan', length - 2);
        $("#tabName").attr('colspan', length - 1);
        $("#tabTime").attr('colspan', 1);
        $("#positionTab").attr('colspan', length - 2);
    }

    /**
     * 設定統計
     */
    function setColumnSum(columnArray, length) {
        var html = '<tr id="' + (length + 1) + '">合計:' + length + '';
        for (var i = 0; i < columnArray.length; i++) {
            var sum = columnArray[i].sum;
            if (sum != undefined && sum) {
                html += '<td>' + columnArray[i].sumValue + '</td>';
            } else {
                if (i == 0) {
                    html += '<td>合計:' + length + '</td>';
                } else {
                    html += '<td></td>';
                }
            }
        }
        html += '</tr>';
        $("#" + length).after(html);
    }

    /**
     * 設定製表人
     * @param operator
     *
     */
    function setOperator(operator) {
        $('#operator').text(operator);
    }

    /**
     * 設定標題
     * @param title
     *
     */
    function setThemeName(title) {
        if (title == undefined) {
            $('#themeName').text("華夏園趣寶金融服務有限公司");
        } else {
            $('#themeName').text("華夏園趣寶金融服務有限公司 " + title);
        }
    }

    /**
     * 設定製表時間
     */
    function setTabTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var milliseconds = date.getMinutes();
        var seconds = date.getSeconds();
        var tabTime = year + "-" + month + '-' + day + ' '+ hours + ':' + milliseconds + ':' + seconds;
        $('#tabTime').text(tabTime);
    }

    function processData(data, object) {
        if (data != null && data != '' && data.rows != null &&
                data.rows != '' && data.success) {
            var rows = data.rows;
            var columnArray;
            if (object.easygrid != undefined) {
                columnArray = getEasyGridColumns(object.easygrid.columns[0]);
                setColumnDatas(rows, columnArray);
            } else if (object.jqgrid != undefined) {
                columnArray = getJQGridColumns(object.jqgrid);
                setColumnDatas(rows, columnArray);
            } else if (object.ligergrid != undefined) {
                columnArray = getLigerGridColumns(object.ligergrid);
                setColumnDatas(rows, columnArray);
            } else {
                if (object.fields != undefined) {
                    columnArray = getEasyGridColumns(object.fields); //使用easyui 未預設
                    setColumnDatas(rows, columnArray);
                } else {
                    var keys = getKeys(rows);
                    if (keys.length > 0) {
                        setCustomColumnDatas(rows, keys);
                    }
                }
            }
        }
        window.print();
    }

</script>
</html>

四、java後臺伺服器
    def print(){
        String fileName = oneLevelService.fileName(params.flage);
        List<GroovyRowResult> rows = oneLevelService.export(params);
        Map<String,Object> map = [success: true,fileName:fileName, rows: rows]
        render map as JSON
    }