Javascript結合C-Lodop實現票務列印模板
阿新 • • 發佈：2018-12-03
開發初衷：業務需求--需要在不同場景打印出不錯亂的門票資訊排版。
實現：C-Lodop HTML+CSS+JS
簡單分析：
-
如果要實現在不同場景下面打印出正常的票，也就是說錄入的模板必須在印表機收到模板的時候打印出規正的門票。我們知道每個印表機列印的位置會和後臺畫素設定有所不同，那麼我們就需要實現設定的模板可調整以便適應印表機在正確的位置打印出資訊。
-
模板如何可調整：
-
引數動態：不確定不同場景客戶需要列印的資訊，所有需要動態調整
-
位置動態：所有的引數資訊可任意拖拽位置（在指定區域內），可動態調整區域性和整體的偏移量
-
樣式動態：字型，對其方式，字型大小，顏色，背景圖
-
資料動態：可對資料進行增加和刪除，可自定義資料
-
-
儲存模板：
-
讓印表機收到資料，需要儲存資料：
-
座標，以模板容器位容器，左上位原點
-
引數建，值
-
-
讓印表機按順序列印：
-
對儲存的資料進行排序
-
-
-
實現思路：利用c-lodop給出的函式做相應的資料構建處理
-
專案構建思路：
-
資料層：最要對模板視覺化資料儲存和提供給介面入庫
-
元素層：動態生成頁面元素
-
事件層：元素操作事件註冊
-
業務層：事件層觸發資料層邏輯處理
-
檢視和測試
-
-
實現核心程式碼
-
data.js
-
(function(global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory : global.mData = factory })(this, (function() { /** * * 資料管理 * */ var mData = { /** * * 配置引數 * */ mData_global: { first_top: 10, //預設第一項的上邊距 first_left: 10, //預設第一項的做邊距 interval_x: 10, //橫向間距 interval_y: 10, //縱向間距 ele_max_width: 300, //預設300畫素 ele_min_width: 80, //預設200畫素 }, /** * * 元素函式 ------>構造元素物件 * * _id 元素ID * _filed 元素欄位 * _val 元素顯示文字 * _x 元素在窗體內的橫座標 * _y 元素在窗體內的縱座標 * _order 元素序號 * _differX 元素在輸出裝置上相對橫向偏移量 * _differY 元素在輸出裝置上相對縱向偏移量 * _fontSize 元素字號 * _fontColor 元素字型顏色 * _fontFamily 元素字型 * _align 元素對齊方式 * _bold 元素加粗 * _italic 元素斜體 * _underline 元素下劃線 * _width 元素的寬度 * _height 元素的高度 * _col 所屬列所在位置 * _pos 行列座標 * _preMax 上一列最大寬度 * */ mPar: function(_id, _filed, _val, _x, _y, _order, _differX, _differY, _fontSize, _fontColor, _fontFamily, _align, _bold, _italic, _underline, _width, _height, _col, _pos, _preMax) { this.id = _id; this.filed = _filed; this.val = _val; this.x = _x ? _x : 0; this.y = _y ? _y : 0; this.width = _width ? 24 : _width; this.height = _height ? 24 : _height; this.order = _order ? _order : 0; this.differX = _differX ? _differX : 0; this.differY = _differY ? _differY : 0; this.fontSize = _fontSize; this.fontColor = _fontColor; this.fontFamily = _fontFamily; this.align = _align; this.bold = _bold; this.italic = _italic; this.underline = _underline; this.col = _col; this.pos = _pos; this.preMax = _preMax; }, /** * * 模板函式 ------>構造模板物件 * * _name 模板名稱 * _height 模板高度 * _width 模板寬度 * _dx 整體橫向偏移量 * _dy 整體縱向偏移量 * _fontSize 整體字號 * _fontColor 整體字型顏色 * _fontFamily 整體字型 * _eles 模板元素集合 * */ tmp: { name: 'xxx_lpp', height: 320, width: 420, dx: 0, dy: 0, fontSize: 12, fontColor: '#000', fontFamily: 'tahoma, "Microsoft Yahei", "SimSun", sans-serif', eles: [], }, /** * 背景圖物件 */ bgi: { t: 0, l: 0, w: 420, h: 320 }, /** * 資料集合 */ mdl: [], preMax: {}, addPre: function(data) { var _this = this; Object.assign(_this.preMax, data); }, delPre: function(key) { if (!this._preMax.hasOwnProperty(key)) { return; } delete this._preMax[key] }, sumPre: function() { var _this = this; var sum = 0; _.forEach(_this.preMax, function(v, k) { sum += v; }) return sum; }, addData: function(data) { this.mdl.push(data); }, delData: function(id) { var _this = this; _this.mdl = _.filter(_this.mdl, function(o) { return o.id !== id; }) }, delDataByFiled: function(filed) { var _this = this; _this.mdl = _.filter(_this.mdl, function(o) { return o.filed !== filed; }) }, updData: function(data) { var _this = this; var obj = _.find(_this.mdl, { id: data.id }); Object.assign(obj, data); _this.mdl = _.filter(_this.mdl, function(o) { return o.id !== data.id; }) _this.mdl.push(obj); }, updDataAll: function(data) { var _this = this; _.forEach(_this.mdl, function(o) { Object.assign(o, data); }) }, delStr: function(str) { return parseInt(str.replace(/px/g, "")); } } return mData; })())evt.js
-
(function(global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory : global.mDrag = factory })(this, (function(doc) { function getEle(id) { return doc.getElementById(id); } function mDrag(par) { this.drag = getEle(par.id); if (par.data) { this.data = par.data; mData.addData(this.data); } this.move(); } mDrag.prototype.move = function() { var _this = this; _this.drag.onmousedown = function(e) { var e = e || window.event; var diffX = e.clientX - _this.drag.offsetLeft; var diffY = e.clientY - _this.drag.offsetTop; if (typeof _this.drag.setCapture != 'undefined') { _this.drag.setCapture(); } doc.onmousemove = function(e) { var e = e || window.event; var left = e.clientX - diffX; var top = e.clientY - diffY; if (left < 0) { left = 0; } else if (left > _this.drag.parentNode.offsetWidth - _this.drag.offsetWidth) { left = _this.drag.parentNode.offsetWidth - _this.drag.offsetWidth; } if (top < 0) { top = 0; } else if (top > _this.drag.parentNode.offsetHeight - _this.drag.offsetHeight) { top = _this.drag.parentNode.offsetHeight - _this.drag.offsetHeight; } _this.drag.style.left = left + 'px'; _this.drag.style.top = top + 'px'; }; doc.onmouseup = function(e) { this.onmousemove = null; this.onmouseup = null; if (typeof _this.drag.releaseCapture != 'undefined') { _this.drag.releaseCapture(); } if (_this.data) { var obj = { x: mData.delStr(_this.drag.style.left), y: mData.delStr(_this.drag.style.top), id: _this.drag.id } mData.updData(obj); } }; } } return mDrag; })(document))上面兩位主要實現的JS，完整程式碼
-