yh-hiprint 1.0.9

package/libs/plugins/watermark.js

@@ -0,0 +1,199 @@
+/**
+ * @Description: canvas 简单的水印工具
+ * @Author: CcSimple
+ * @Github: https://github.com/CcSimple
+ */
+
+/**
+ * @Description: 时间格式化
+ * @param date
+ * @param format
+ * @returns {string|null}
+ */
+function timeFormat(date, format = 'YYYY-MM-DD') {
+  if (!date) return null;
+  if (typeof date === 'number') {
+    date = new Date(date);
+  }
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  const hours24 = date.getHours();
+  const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const dd = t => `0${t}`.slice(-2);
+  const map = {
+    YYYY: year,
+    MM: dd(month + 1),
+    MMMM: `${month + 1}月`,
+    M: month + 1,
+    DD: dd(day),
+    D: day,
+    HH: dd(hours24),
+    H: hours24,
+    hh: dd(hours),
+    h: hours,
+    mm: dd(minutes),
+    m: minutes,
+    ss: dd(seconds),
+    s: seconds
+  };
+  return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
+}
+
+// 水印参数
+const defaultOption = {
+  id: 'watermark', // 水印id
+  watch: false,
+  content: 'vue-plugin-hiprint', // 水印内容
+  container: '.hiprint-printPaper', // 水印容器
+  width: 200, // 水印宽度
+  height: 200, // 水印高度
+  textAlign: 'center', // 水印文字水平对齐方式
+  textBaseline: 'middle', // 水印文字垂直对齐方式
+  fontSize: '14px', // 水印文字大小
+  fontFamily: 'Microsoft Yahei', // 水印文字字体
+  fillStyle: 'rgba(184, 184, 184, 0.3)', // 水印文字颜色
+  rotate: 25,// 水印文字旋转角度
+  timestamp: false, // 是否显示时间戳
+  format: 'YYYY-MM-DD HH:mm', // 时间戳格式
+  zIndex: 0
+};
+
+// 监听器
+let observerMap = {};
+
+/**
+ * @Description: 创建水印
+ * @param param
+ * @private
+ */
+function _createWatermark(param) {
+  const {
+    id,
+    watch,
+    content,
+    container,
+    width,
+    height,
+    textAlign,
+    textBaseline,
+    fontSize,
+    fontFamily,
+    fillStyle,
+    rotate,
+    timestamp,
+    format,
+    zIndex
+  } = param;
+
+  observerMap[id] = {
+    wmMo: null, // MutationObserver
+    wmTimer: null // timestamp
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('width', `${width}px`);
+  canvas.setAttribute('height', `${height}px`);
+
+  let containerDom = typeof container === 'string' ? document.querySelector(container) : container;
+
+  const ctx = canvas.getContext('2d');
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+  ctx.font = `${fontSize} ${fontFamily}`;
+  ctx.fillStyle = fillStyle;
+  ctx.translate(width / 2, height / 2);
+  ctx.rotate(-(Math.PI / 180) * rotate);
+  ctx.fillText(`${content}`, 0, 0);
+  timestamp && ctx.fillText(`${timeFormat(new Date(), format)}`, 0, parseInt(fontSize) + 5);
+
+  let __vm = containerDom.querySelector('.__vm__' + id);
+  const watermarkDiv = __vm || document.createElement('div');
+  const withHeightStr = containerDom.getAttribute('style');
+  const styleStr = `position:absolute;user-select:none;top:0;left:0;${withHeightStr};z-index:${zIndex};pointer-events:none !important;background-repeat:repeat;background-image:url('${canvas.toDataURL()}')`;
+
+  watermarkDiv.setAttribute('style', styleStr);
+  watermarkDiv.classList.add('__vm__' + id);
+
+  if (!__vm) {
+    containerDom.insertBefore(watermarkDiv, containerDom.firstChild);
+  }
+
+  if (watch) {
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+    if (MutationObserver) {
+      observerMap[id]["wmMo"] = new MutationObserver((e) => {
+        let change = e.some(item => item.target.className == containerDom.className && item.type == 'attributes');
+        __vm = containerDom.querySelector('.__vm__' + id);
+        if ((__vm && __vm.getAttribute('style') !== styleStr) || !__vm || change) {
+          // 避免一直触发
+          observerMap[id]["wmMo"].disconnect();
+          observerMap[id]["wmMo"] = null;
+          delete observerMap[id]["wmMo"];
+          _createWatermark(param);
+        }
+      });
+      observerMap[id]["wmMo"].observe(containerDom, {
+        attributes: true, subtree: true, childList: true
+      });
+    }
+  }
+
+  if (format) {
+    let timeout = 1000 * 60 * 60 * 24;
+    if (format.includes('s')) {
+      timeout = 1000;
+    } else if (format.includes('m')) {
+      timeout = 1000 * 60;
+    } else if (format.includes('h') || format.includes('H')) {
+      timeout = 1000 * 60 * 60;
+    }
+
+    observerMap[id]["wmTimer"] = window.setTimeout(() => {
+      // 触发 MutationObserver
+      watermarkDiv.style.bottom = '0';
+    }, timeout);
+  }
+}
+
+/**
+ * @Description: 销毁水印
+ */
+const destroyWatermark = function (options) {
+  const {
+    id,
+    watch,
+    container,
+  } = options;
+  if (watch) {
+    let containerDom = typeof container === 'string' ? document.querySelector(container) : container;
+    // 监听器关闭
+    if (observerMap[id]) {
+      observerMap[id]["wmMo"] && observerMap[id]["wmMo"].disconnect();
+      observerMap[id]["wmMo"] = null;
+      observerMap[id]["wmTimer"] && window.clearTimeout(observerMap[id]["wmTimer"]);
+      observerMap[id]["wmTimer"] = null;
+      delete observerMap[id];
+    }
+    // 删除水印元素
+    const __vm = containerDom.querySelector('.__vm__' + id);
+    __vm && __vm.parentNode.removeChild(__vm);
+  }
+}
+
+/**
+ * @Description: 创建水印
+ * @param option
+ */
+const createWatermark = function (option) {
+  let options = Object.assign({}, defaultOption, option);
+  destroyWatermark(options);
+  _createWatermark(options);
+}
+
+// 暴露接口
+export default {
+  createWatermark, destroyWatermark
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "yh-hiprint",
+  "version": "1.0.9",
+  "description": "Hiprint for Vue3 by NoahLiu in ForceCon in Hunan Changesha",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks",
+    "pub:npm": "npm publish --registry https://registry.npmjs.org/ --no-git-checks"
+  },
+  "dependencies": {
+    "jquery": "3.7.0",
+    "@claviska/jquery-minicolors": "2.3.6",
+    "jsbarcode": "3.11.5",
+    "jspdf": "2.5.1",
+    "html2canvas": "1.4.1",
+    "nzh": "1.0.9",
+    "canvg": "4.0.1"
+  },
+  "peerDependencies": {
+    "vue": "3.2.47"
+  },
+  "author": "Liubin"
+}

package/panel.js

@@ -0,0 +1,58 @@
+export default {
+  panels: [
+    {
+      index: 0,
+      height: 296.6,
+      width: 210,
+      paperHeader: 49.5,
+      paperFooter: 780,
+      watermarkOptions: {
+        content: "力控远海",
+        rotate: 25,
+      },
+      printElements: [
+        {
+          options: { left: 60, top: 27, height: 13, width: 52, title: "页眉线", textAlign: "center" },
+          printElementType: { type: "text" },
+        },
+        {
+          options: {
+            left: 10,
+            top: 100,
+            height: 100,
+            width: 570,
+            field: "table",
+            columns: [
+              [
+                {
+                  width: 100,
+                  title: "姓名",
+                  align: "left",
+                },
+                {
+                  width: 100,
+                  title: "性别",
+                },
+                {
+                  width: 100,
+                  title: "销售数量",
+                },
+                {
+                  width: 100,
+                  title: "销售金额",
+                },
+              ],
+            ],
+          },
+          printElementType: { type: "table" },
+        },
+        {
+          options: { left: 525, top: 784.5, height: 13, width: 63, title: "页尾线", textAlign: "center" },
+          printElementType: { title: "自定义文本", type: "text" },
+        },
+      ],
+      paperNumberLeft: 565.5,
+      paperNumberTop: 819,
+    },
+  ],
+};

package/scale.js

@@ -0,0 +1,42 @@
+import $ from "jquery";
+export default (function () {
+  function t() {
+    // json模板 options 对应键值 key
+    this.name = "scale";
+  }
+  // 涉及修改元素样式， 添加一个 css 方法
+  // t: 元素对象， e 参数值
+  return (
+    (t.prototype.css = function (t, e) {
+      if (t && t.length) {
+        if (e) return t.css("transform", "scale(" + e + ")");
+      }
+      return null;
+    }),
+    // 创建 DOM
+    (t.prototype.createTarget = function (t, i, e) {
+      //  t: 元素对象，i: 元素options, e: 元素printElementType
+      return (
+        (this.target = $(
+          '<div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        缩放\n        </div>\n        <div class="hiprint-option-item-field">\n        <input type="number" value="1" step="0.1" min="0.1" max="3" class="auto-submit"/>\n        </div>\n    </div>'
+        )),
+        this.target
+      );
+    }),
+    // 获取值
+    (t.prototype.getValue = function () {
+      var t = this.target.find("input").val();
+      if (t) return parseFloat(t.toString());
+    }),
+    // 设置值
+    (t.prototype.setValue = function (t) {
+      //  t: options 对应键的值
+      this.target.find("input").val(t);
+    }),
+    // 销毁 DOM
+    (t.prototype.destroy = function () {
+      this.target.remove();
+    }),
+    t
+  );
+})();

package/z-index.js

@@ -0,0 +1,35 @@
+import $ from "jquery";
+
+export default (function () {
+  function t() {
+    this.name = "zIndex";
+  }
+
+  return (
+    (t.prototype.css = function (t, e) {
+      if (t && t.length) {
+        if (e) return t.css("z-index", e);
+      }
+      return null;
+    }),
+    (t.prototype.createTarget = function () {
+      return (
+        (this.target = $(
+          '<div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        元素层级2\n        </div>\n        <div class="hiprint-option-item-field">\n        <input type="number" class="auto-submit"/>\n        </div>\n    </div>'
+        )),
+        this.target
+      );
+    }),
+    (t.prototype.getValue = function () {
+      var t = this.target.find("input").val();
+      if (t) return parseInt(t.toString());
+    }),
+    (t.prototype.setValue = function (t) {
+      this.target.find("input").val(t);
+    }),
+    (t.prototype.destroy = function () {
+      this.target.remove();
+    }),
+    t
+  );
+})();