利用富文本編輯器實現打印模板設置功能

思路：取表單值以及printkey屬性標記的html內容，批量替換模板中的內容。

模板設置頁面代碼：

@{
    ViewBag.Title = "PrintSet";
    Layout = "~/Views/Shared/_Layout.cshtml";

    Suya.Auth.Contract.IPrintSettingsService printSettingsService = FNet.Service.ServiceHelper.CreateService<Suya.Auth.Contract.IPrintSettingsService>();
    Model.Suya.sys_printsettings settings = printSettingsService.Get(ViewBag.code);
    if (settings == null)
    {
        ViewBag.content = "";
    }
    else
    {
        ViewBag.content = settings.contents
            .Replace("&lt;", "<")
            .Replace("&gt;", ">")
            .Replace("&quot;", "\"")
            .Replace("&#039;", "'")
            .Replace("&amp;", "&")
            .Replace("\n", "");
    }
}
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="/Content/Plugins/UEditor/ueditor.config.wfprintset.js"></script>
<script type="text/javascript" src="/Content/Plugins/UEditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/Plugins/UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $(function () {
        ue = UE.getEditor('ueditor', {}); //建立和引用編輯器實例
        ue.addListener('ready', function (editor) {
            ue.setHeight(350); //編輯器加載完成後，設置默認高度並默認關閉了自動長高
            var html = decodeHtml('@ViewBag.content');
            ue.execCommand('insertHtml', html);
        });
        ue.addListener("contentChange", function () {
        });
    });            //end $.ready

    //保存
    function save() {
        if (ue.hasContents()) {
            var contents = encodeHtml(ue.getContent().replace(/<p>[\s|&nbsp;|<br \/>]*<\/p>/g, ""));
            var code = "@ViewBag.code";

            $.ajax({
                url: "/WF/WFDesign/SavePrintSet",
                type: "POST",
                dataType: "json",
                data: { code: code, contents: contents },
                success: function (data) {
                    if (fnet.ajax.success(data)) {
                        fnet.msg.info("保存成功");
                        back();
                    }
                    else {
                        fnet.msg.error(data.msg);
                    }
                }
            });
        }
    }

    //返回
    function back() {
        refreshTab("打印設置");
    }
</script>
<div class="label">
    <input type="button" class="submit_btn" value="保存" onclick="save()" style="float: right;" />
    <input type="button" class="submit_btn" value="返回" onclick="back()" style="float: right;" />
</div>
<div style="margin-top: 37px; padding-left: 5px;">
    <div style="padding: 10px;">
        設置說明：若是要隱藏某個字段，請在字段標題和字段值兩邊加上雙中括號，例：隱藏單號字段：[[單號]]、[[{{billCode}}]]
    </div>
    <!-- 加載編輯器的容器 -->
    <script id="ueditor" type="text/plain" style="width: 99.5%; height: 350px;"></script>
</div>

View Code

效果圖：

打印頁面JS代碼：

//打印
var LODOP;
function printPage(areaId) {
    var code = $("#lblWfType").val();
    $.ajax({
        url: "/WF/WFDesign/GetPrintSet",
        type: "POST",
        dataType: "json",
        data: { code: code, wfId: "@Model.lblInstanceID" },
        success: function (data) {
            if (!data.ok) {
                alert(data.msg);
                return;
            }

            //數據
            $("#printTem").html($("form").parent().html());

            var inputArr = $("#printTem").find("input:text,input:radio,input:checkbox,textarea,select");
            inputArr.each(function () {
                var jQ = $(this);
                jQ.attr("disabled", false);
            });

            var dataFrmVal = $("#printTem").find("form").serializeArray();
            $("#printTem").html("");
            var dataFrm = eval("(" + FormToJson(dataFrmVal) + ")");

            var jsonData = { frmData: dataFrm, list: [] };

            var forPrint = [];
            $("[printkey]").each(function () {
                var printKey = $(this).attr("printkey");
                var val = $(this).html();
                forPrint.push({ key: printKey, val: val });
            });

            var allSpecifiedGrids = $("#AllSpecifiedGrids").val();
            if (allSpecifiedGrids != "" && allSpecifiedGrids != null) {
                var alspGridsArr = allSpecifiedGrids.split(',');
                for (var i = 0; i < alspGridsArr.length; i++) {
                    jsonData.list.push({ Key: alspGridsArr[i], Value: $('#' + alspGridsArr[i]).datagrid('getRows') });
                }
            }

            var html = decodeHtml(data.content);

            $("#printTem").append('<style type="text/css">table{border-collapse: collapse;}table td{border: solid 1px #000; height:25px; padding:2px;}</style>');
            $("#printTem").append(html);
            $("#printTem").find("table").each(function () {
                $(this).attr("cellspacing", "0");
                $(this).attr("cellpadding", "0");
            });

            for (var i = 0; i < jsonData.list.length; i++) { //遍歷子表
                var key = jsonData.list[i].Key;
                var list = jsonData.list[i].Value;

                var detailTable = $("#printTem").find("table[id='" + key + "']");
                if (detailTable.length > 0) {
                    detailTable.find("td").each(function () {
                        var re = /\[\[[^\]\[]*\]\]/g;
                        if (re.test($(this).html()) == true) {
                            $(this).remove();
                        }
                    });
                    for (var j = 0; j < list.length; j++) {
                        var rowTem = $("#printTem").find("table[id='" + key + "']").find("tr:eq(1)").html();
                        for (items in list[j]) {
                            var reg = new RegExp("{{" + items + "}}", "g");
                            if (list[j][items]) {
                                var dateVal = getDateVal(list[j][items]);
                                if (dateVal) {
                                    rowTem = rowTem.replace(reg, dateVal);
                                }
                                else {
                                    rowTem = rowTem.replace(reg, list[j][items]);
                                }
                            }
                            else {
                                rowTem = rowTem.replace(reg, "");
                            }
                        }
                        $("#printTem").find("table[id='" + key + "']").append("<tr>" + rowTem + "</tr>");
                    }
                    $("#printTem").find("table[id='" + key + "']").find("tr:eq(1)").remove();
                }
            }

            html = $("#printTem").html();
            //處理主表
            for (items in jsonData.frmData[0]) {
                var reg = new RegExp("{{" + items + "}}", "g");
                html = html.replace(reg, jsonData.frmData[0][items]);
            }
            //處理主表
            for (var i = 0; i < forPrint.length; i++) {
                var items = forPrint[i];
                var reg = new RegExp("{{" + items.key + "}}", "g");
                html = html.replace(reg, items.val);
            }
            html = html.replace(/\[\[[^\]\[]*\]\]/g, "");
            $("#printTem").html(html);

            /* $("#printTem").find("table:first").prev().before('<p>工做流信息：</p><table style="width:100%;">' + $("#tabDetailWf2Info").html() + '</table>');
            $("#printTem").find("table:first").find("td").removeAttr("class");
            $("#printTem").find("table:first").find("td").removeAttr("style"); */
            $("#printTem").append('<p>審批記錄：</p><table style="width:100%;">' + $("#auditRecord").html() + '</table>');
            $("#printTem").find("table:last").find("td").removeAttr("class");
            $("#printTem").find("table:last").find("td").removeAttr("style");
            $("#printTem").find("table").attr("width", "100%");
            $("#printTem").find("table").css("width", "100%");
            $("#printTem").find("table td").removeAttr("width");
            //$("#printTem").show(); return; //測試用

            html = $("#printTem").html();
            $("#printTem").html("");

            //打印
            LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
            LODOP.PRINT_INIT("分頁打印");
            LODOP.ADD_PRINT_HTM(30, 30, 1070, "BottomMargin:30px", html);
            LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4");
            LODOP.SET_PRINT_COPIES(1);
            LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //橫向時的正向顯示
            var printResult = LODOP.PREVIEW();
            if (printResult) {
                //alert("打印成功");
                $.ajax({
                    url: "/WF/WFDesign/SavePrintRecords",
                    type: "POST",
                    dataType: "json",
                    data: { wfTypeCode: code, wfId: "@Model.lblInstanceID", wfName: "@Model.lblTitle", printResult: 1, reason: "" },
                    success: function (data) { }
                });
            }
            else {
                //alert("打印失敗：取消打印");
            }
        }
    });
}

function getLodop(oOBJECT, oEMBED) {
    /**************************
    本函數根據瀏覽器類型決定採用哪一個對象做爲控件實例：
    IE系列、IE內核系列的瀏覽器採用oOBJECT，
    其它瀏覽器(Firefox系列、Chrome系列、Opera系列、Safari系列等)採用oEMBED。
    **************************/
    var strHtml1 = "<br><br><br><br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='/Content/Plugins/lodop/install_lodop.exe'>執行安裝</a>,安裝後請刷新頁面或從新進入。</font>";
    var strHtml2 = "<br><br><br><br><font color='#FF00FF'>打印控件須要升級!點擊這裏<a href='/Content/Plugins/lodop/install_lodop.exe'>執行升級</a>,升級後請從新進入。</font>";
    var strHtml3 = "<br><br><br><br><font color='#FF00FF'>注意：<br>1：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它;<br>2：若是瀏覽器表現出停滯不動等異常，建議關閉其「plugin-container」(網上搜關閉方法)功能;</font>";
    var LODOP = oEMBED;
    try {
        if (navigator.appVersion.indexOf("MSIE") >= 0) LODOP = oOBJECT;

        if ((LODOP == null) || (typeof (LODOP.VERSION) == "undefined")) {
            if (navigator.userAgent.indexOf('Firefox') >= 0)
                document.documentElement.innerHTML = strHtml3 + document.documentElement.innerHTML;
            if (navigator.appVersion.indexOf("MSIE") >= 0) document.write(strHtml1); else
                document.documentElement.innerHTML = strHtml1 + document.documentElement.innerHTML;
            return LODOP;
        } else if (LODOP.VERSION < "6.0.5.8") {
            if (navigator.appVersion.indexOf("MSIE") >= 0) document.write(strHtml2); else
                document.documentElement.innerHTML = strHtml2 + document.documentElement.innerHTML;
            return LODOP;
        }
        //*****以下空白位置適合調用統一功能:*********         


        //*******************************************
        return LODOP;
    } catch (err) {
        document.documentElement.innerHTML = "Error:" + strHtml1 + document.documentElement.innerHTML;
        return LODOP;
    }
}

function decodeHtml(val) {
    return val.replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">")
            .replace(/&quot;/g, "\"")
            .replace(/&#039;/g, "'")
            .replace(/&amp;/g, "&");
}

//日期格式
function getDateVal(value) {
    if (!value) return undefined;
    if (value instanceof Date) {
        return value.format("yyyy-MM-dd");
    }
    else if (value.toString().indexOf("Date") != -1) {
        var date = new Date();
        date.setTime(value.replace(/\/Date\((-?\d+)\)\//, '$1'));
        return date.format("yyyy-MM-dd");
    }
    else {
        return undefined;
    }
}

View Code

打印預覽效果圖：