星空网 > 软件开发 > Java

利用富文本编辑器实现打印模板设置功能

思路:取表单值以及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='/images/loading.gif' data-original="http://www.cnblogs.com//Content/Plugins/UEditor/ueditor.config.wfprintset.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//Content/Plugins/UEditor/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8" src='/images/loading.gif' data-original="http://www.cnblogs.com//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 >' + $("#tabDetailWf2Info").html() + '</table>');      $("#printTem").find("table:first").find("td").removeAttr("class");      $("#printTem").find("table:first").find("td").removeAttr("style"); */      $("#printTem").append('<p>审批记录:</p><table >' + $("#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='http://www.cnblogs.com//Content/Plugins/lodop/install_lodop.exe'>执行安装</a>,安装后请刷新页面或重新进入。</font>";  var strHtml2 = "<br><br><br><br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://www.cnblogs.com//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

打印预览效果图:

利用富文本编辑器实现打印模板设置功能

 




原标题:利用富文本编辑器实现打印模板设置功能

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流