Design and Implementation of a Dynamic Printing Template System Using OnlyOffice Plugin

In administrative approval and document processing, creating printable templates is essential, and rapid customization to meet complex business needs is critical. The main pain points include ensuring printed charts match page display, supporting zero‑code "Chinese‑style" complex reports, handling various complex styles, and achieving WYSIWYG printing.

Common implementation methods are: (1) coding each template manually; (2) preparing offline templates with placeholders replaced in code; (3) using tools like iReport to create JasperReport templates; (4) employing client‑side tools to assist template creation.

Drawbacks of these methods are: templates are hard to create and modify; code changes are required for new business scenarios; and fine‑grained style control often conflicts with page configurability when bound to forms.

The desired capabilities are: visual display of form data sets; creation of fixed printable content on web pages; flexible configuration of printable variables; WYSIWYG style adjustments; preview of print results; and real‑time effect.

OnlyOffice plugins can quickly achieve these goals. The implementation includes designing templates with OnlyOffice's extensible API, exposing form fields as a tree structure for drag‑and‑drop insertion, and using Word's native styling for fine adjustments.

Implementation process involves using OnlyOffice's document server (Word and Excel) via an iframe, creating a custom plugin, and handling cross‑page communication. The plugin's code structure consists of config.json , icon.png , field.js , index.html , and styles.css .

yaml
field_plugin
- config.json   # configuration file
- icon.png      # icon
- field.js      # plugin logic
- index.html    # plugin layout and entry
- styles.css    # plugin stylesheet

Key JavaScript snippets initialize the plugin and handle button clicks:

javascript
(function (window, undefined) {
   window.Asc.plugin.init = function () {
       // initialization logic after plugin loads
   };
   window.Asc.plugin.button = function (id) {
       // button click callback, close plugin
       this.executeCommand("close", "");
   };
})(window, undefined);

Form fields are displayed as a tree in the editor, allowing users to drag variables into the template. The plugin retrieves the template identifier from the document title and fetches the corresponding data source:

javascript
var templateId = window.Asc.plugin.info.documentTitle.split(".")[0];
$.get("http://server/establish-server/free/printingTemplate/" + templateId + "/dataSource", function(res) {
   if (res && !res.hasError) {
       // process and render tree nodes
   }
});

Inserting fields into the document uses OnlyOffice's API. For Word documents:

javascript
function insertString(field) {
   window.Asc.plugin.callCommand(function () {
       var oDocument = Api.GetDocument();
       var oParagraph = Api.CreateParagraph();
       oParagraph.AddText(field);
       oDocument.InsertContent([oParagraph], true);
   }, false);
}

Because the execution context differs, the field must be passed via Asc.scope :

javascript
function insertString(field) {
   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);
}

For Excel templates, the API differs and the code adapts accordingly:

javascript
function insertString(field) {
   var editorType = window.Asc.plugin.info.editorType;
   Asc.scope.field = field;
   if (editorType === "word") {
       // Word insertion logic (same as above)
   } 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);
   }
}

After deploying the plugin to the OnlyOffice Document Server's /var/www/onlyoffice/documentserver/sdkjs-plugins directory and restarting the service, the custom plugin becomes available in the editor, enabling users to configure and preview printable templates with data-driven content that matches the appearance of manually crafted Word documents.

The final result demonstrates a seamless integration of form data into printable templates, providing a visual, configurable, and real‑time printing solution for complex administrative workflows.