一体化审批系统|如何让工程师摆脱制作打印模板的噩梦
支持打印出的图表与页面展现完全一致；
支持零编码定义“中国式”复杂报表；
支持各种复杂样式、基本计算的报表定义；
实现各项表单“所见即所得”的打印模式，打印出的表单布局美观、内容清晰。
2 常用的实现方法
方案一，用代码把每个模板实现一遍；
方案二，线下制作好模板，代码中替换预设好的占位符；
方案三，通过类似“iReport"工具制作不同"JasperReport"模板；
方案四，采用cs端工具辅助实现制作模板。
这些实现方法存在的弊端有：
模板制作与变更不方便； 需要修改代码，不能快速灵活的适配各种复杂业务需求； 与表单绑定的场景下，打印样式精细化控制与页面可配置往往不可兼得。
4 我们需要什么？
我们需要实现的是：
能可视化展示表单的数据集；
能在web页面上制作固定打印内容；
能灵活配置打印输出变量；
能对打印内容做精细化样式调整所见即所得；
能预览打印效果；
能实时生效。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
5 实现构想
5.1 模板如何设计制作？
5.2 数据如何预览并打印？
6 实现过程
6.1 插件代码结构
yamlfield_plugin- config.json # 配置文件- icon.png # 图标- field.js # 插件逻辑代码- index.html # 插件布局及入口- styles.css # 插件样式表filed.jsjavascript(function (window, undefined) {window.Asc.plugin.init = function () {// 插件加载完后的初始化回调，相关逻辑代码编写在此};window.Asc.plugin.button = function (id) {// 插件按钮点击回调，此处关闭插件this.executeCommand("close", "");};})(window, undefined);
6.2 表单字段可视化展示
在插件实现过程中，难点是如何将外部表单数据与onlyoffice编辑器通讯，因为这两块都是各自独立的，经过我们实验，用模板文件名传递标识，能有效的解决这个问题。
javascriptvar templateId = window.Asc.plugin.info.documentTitle.split(".")[0];
onlyoffice编辑器内部拿到最关键的标识id后，就能方便的请求后台数据，经过格式化就能以树形结构展示了。
javascript$.get("http://server/establish-server/free/printingTemplate/" + templateId + "/dataSource", function(res) {if (res && !res.hasError) {zNodesRaw.push(filterDataSource(res.result.mainTable));if (res.result.childTables.length > 0) {res.result.childTables.forEach(item => {zNodesRaw.push(filterDataSource(item));});}if (systemFields.hasOwnProperty(res.result.pageType) && systemFields[res.result.pageType]) {zNodesRaw.push(systemFields[res.result.pageType]);}zNodes = JSON.parse(JSON.stringify(zNodesRaw));$.fn.zTree.init(treeObj, setting, zNodes);}});
javascriptfunction insertString(field) {window.Asc.plugin.callCommand(function () {var oDocument = Api.GetDocument();var oParagraph = Api.CreateParagraph();oParagraph.AddText(field);oDocument.InsertContent([oParagraph], true);}, false);}
function insertString(field) {// callCommand执行上下文与当前环境不一致，需通过Asc.scope对象传递参数Asc.scope.field = field;window.Asc.plugin.callCommand(function () {var oDocument = Api.GetDocument();var oParagraph = Api.CreateParagraph();oParagraph.AddText(Asc.scope.field);oDocument.InsertContent([oParagraph], true);}, false);}
function insertString(field) {var editorType = window.Asc.plugin.info.editorType;// callCommand执行上下文与当前环境不一致，需通过Asc.scope对象传递参数Asc.scope.field = field;if (editorType === "word") {window.Asc.plugin.callCommand(function () {var oDocument = Api.GetDocument();var oParagraph = Api.CreateParagraph();oParagraph.AddText(Asc.scope.field);oDocument.InsertContent([oParagraph], true);}, false);} else if (editorType === "cell") {window.Asc.plugin.callCommand(function () {var oWorksheet = Api.GetActiveSheet();var oCell = oWorksheet.GetActiveCell();var value = oCell.GetValue();oCell.SetValue(value + Asc.scope.field);}, false);}}
6.4 部署与运行
7 总结
实现看似简单的一个功能，其背后所需要的努力，只有亲历者才最清楚。其中遇到的种种问题与仔细思考后解决问题的过程，不仅是经验的积累，也是开发者的乐趣。
End
