利⽤富⽂本编辑器实现打印模板设置功能思路：取表单值以及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.de);
if (settings == null)
{
}
else
{
.Replace("<", "<")
.Replace(">", ">")
.Replace(""", "\"")
.Replace("'", "'")
.Replace("&", "&")
.Replace("\n", "");
}
}
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/Content/Plugins/fig.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('@t');
});
ue.addListener("contentChange", function () {
});
});            //end $.ready
//保存
function save() {
if (ue.hasContents()) {
var contents = Content().replace(/<p>[\s| |<br \/>]*<\/p>/g, ""));
var code = "@de";
$.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 {
(data.msg);
}
}
});
}
}
//返回
function back() {
refreshTab("打印设置");
}
</script>
<div class="label">
<input type="button" class="submit_btn" value="保存" onclick="save()" />
<input type="button" class="submit_btn" value="返回" onclick="back()" />
</div>
<div >
<div >
设置说明：如果要隐藏某个字段，请在字段标题和字段值两边加上双中括号，例：隐藏单号字段：[[单号]]、[[{{billCode}}]]
</div>
<!-- 加载编辑器的容器 -->
<script id="ueditor" type="text/plain" ></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 = t);
$("#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 = place(reg, dateVal);
}
else {
rowTem = place(reg, list[j][items]);
}
}
else {
rowTem = place(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 = place(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 = place(reg, items.val);
}
html = place(/\[\[[^\]\[]*\]\]/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 = ElementById('LODOP_OB'), ElementById('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/'>执⾏安装</a>，安装后请刷新页⾯或重新进⼊。</font>"; var strHtml2 = "<br><br><br><br><font color='#FF00FF'>打印控件需要升级!点击这⾥<a href='/Content/Plugins/lodop/'>执⾏升级</a>，升级后请重新进⼊。</font>";
var strHtml3 = "<br><br><br><br><font color='#FF00FF'>注意：<br>1：如曾安装过Lodop旧版附件npActiveXPLugin，请在【⼯具】->【附加组件】->【扩展】中先卸它;<br>2：如果浏览器表现出停滞不动等异常，建议关闭其“plugin-container”(⽹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) {
place(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, "\"")
.replace(/'/g, "'")
.replace(/&/g, "&");
}
//⽇期格式
function getDateVal(value) {
if (!value) return undefined;
if (value instanceof Date) {
return value.format("yyyy-MM-dd");
}
else if (String().indexOf("Date") != -1) {
var date = new Date();
date.place(/\/Date\((-?\d+)\)\//, '$1'));
return date.format("yyyy-MM-dd");
}
else {
return undefined;
}
}
View Code
打印预览效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。