打印设计

package.json

@@ -43,10 +43,12 @@
     "@riophae/vue-treeselect": "0.4.0",
     "@smallwei/avue": "^3.2.20",
     "@sscfaith/avue-form-design": "^1.5.6",
+    "ant-design-vue": "^1.7.8",
     "axios": "0.24.0",
     "beautifier": "^0.1.7",
     "china-area-data": "^5.0.1",
     "clipboard": "2.0.8",
+    "concurrent-tasks": "^1.0.7",
     "core-js": "3.25.3",
     "css": "^3.0.0",
     "css-loader": "^3.5.3",
@@ -60,6 +62,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less-loader": "^6.1.1",
     "npm": "^6.13.7",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
@@ -72,6 +75,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-plugin-hiprint": "0.0.56",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
@@ -89,7 +93,9 @@
     "cross-env": "^7.0.3",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "jquery": "^3.6.0",
     "lint-staged": "10.5.3",
+    "nzh": "^1.0.8",
     "ora": "^7.0.1",
     "runjs": "4.4.2",
     "sass": "1.32.13",

public/index.html

@@ -6,6 +6,13 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- hiprint 拖拽图标需要 -->
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <!-- <link href="<%= BASE_URL %>bootstrap.min.css" rel="stylesheet"> -->
+    <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
+    <!-- hiprint -->
+
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

public/print-lock.css

@@ -0,0 +1,349 @@
+@media print {
+  body {
+    margin: 0px;
+    padding: 0px;
+  }
+}
+
+@page {
+  margin: 0;
+}
+
+.hiprint-printPaper * {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box; /* Firefox */
+  -webkit-box-sizing: border-box; /* Safari */
+}
+
+.hiprint-printPaper *:focus {
+  outline: -webkit-focus-ring-color auto 0px;
+}
+
+.hiprint-printPaper {
+  position: relative;
+  padding: 0 0 0 0;
+  page-break-after: always;
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -moz-user-select: none; /* Firefox */
+  user-select: none;
+  overflow-x: hidden;
+  overflow: hidden;
+}
+
+.hiprint-printPaper .hiprint-printPaper-content {
+  position: relative;
+}
+
+/* 火狐浏览器打印 第一页过后 重叠问题 */
+@-moz-document url-prefix() {
+  .hiprint-printPaper .hiprint-printPaper-content {
+    position: relative;
+    margin-top: 20px;
+    top: -20px
+  }
+}
+
+.hiprint-printPaper.design {
+  overflow: visible;
+}
+
+
+.hiprint-printTemplate .hiprint-printPanel {
+  page-break-after: always;
+}
+
+.hiprint-printPaper, hiprint-printPanel {
+  box-sizing: border-box;
+  border: 0px;
+}
+
+.hiprint-printPanel .hiprint-printPaper:last-child {
+  page-break-after: avoid;
+}
+
+.hiprint-printTemplate .hiprint-printPanel:last-child {
+  page-break-after: avoid;
+}
+
+.hiprint-printPaper .hideheaderLinetarget {
+  border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper .hidefooterLinetarget {
+  border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper.design {
+  border: 1px dashed rgba(170, 170, 170, 0.7);
+}
+
+.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.design .resize-panel {
+  box-sizing: border-box;
+  border: 1px dotted;
+}
+
+.hiprint-printElement-text {
+  background-color: transparent;
+  background-repeat: repeat;
+  padding: 0 0 0 0;
+  border: 0.75pt none rgb(0, 0, 0);
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  line-height: 9.75pt;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.design .hiprint-printElement-text-content {
+  border: 1px dashed rgb(206, 188, 188);
+  box-sizing: border-box;
+}
+
+.hiprint-printElement-longText {
+  background-color: transparent;
+  background-repeat: repeat;
+  border: 0.75pt none rgb(0, 0, 0);
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  line-height: 9.75pt;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+  /*white-space: pre-wrap*/
+}
+
+
+.hiprint-printElement-table {
+  background-color: transparent;
+  background-repeat: repeat;
+  color: rgb(0, 0, 0);
+  border-color: rgb(0, 0, 0);
+  border-style: none;
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  padding: 0 0 0 0;
+  box-sizing: border-box;
+  line-height: 9.75pt;
+}
+
+.hiprint-printElement-table thead {
+  background: #e8e8e8;
+  font-weight: 700;
+}
+
+table.hiprint-printElement-tableTarget {
+  width: 100%;
+}
+
+.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
+  border-color: rgb(0, 0, 0);
+  /*border-style: none;*/
+  /*border: 1px solid rgb(0, 0, 0);*/
+  font-weight: normal;
+  direction: ltr;
+  padding-bottom: 0pt;
+  padding-left: 4pt;
+  padding-right: 4pt;
+  padding-top: 0pt;
+  text-decoration: none;
+  vertical-align: middle;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+  /*line-height: 9.75pt;
+  font-size: 9pt;*/
+}
+
+.hiprint-printElement-tableTarget-border-all {
+  border: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-none {
+  border: 0px solid;
+}
+.hiprint-printElement-tableTarget-border-lr {
+  border-left: 1px solid;
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-left {
+  border-left: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-right {
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-tb {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-top {
+  border-top: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-bottom {
+  border-bottom: 1px solid;
+}
+
+.hiprint-printElement-tableTarget-border-td-none td {
+  border: 0px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) {
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:last-child {
+  border-left: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {
+  border-left: none;
+}
+
+/*.hiprint-printElement-tableTarget tr,*/
+.hiprint-printElement-tableTarget td {
+  height: 18pt;
+}
+
+.hiprint-printPaper .hiprint-paperNumber {
+  font-size: 9pt;
+}
+
+.design .hiprint-printElement-table-handle {
+  position: absolute;
+  height: 21pt;
+  width: 21pt;
+  background: red;
+  z-index: 1;
+}
+
+.hiprint-printPaper .hiprint-paperNumber-disabled {
+  float: right !important;
+  right: 0 !important;
+  color: gainsboro !important;
+}
+
+.hiprint-printElement-vline, .hiprint-printElement-hline {
+  border: 0px none rgb(0, 0, 0);
+
+}
+
+.hiprint-printElement-vline {
+  border-left: 0.75pt solid #000;
+  border-right: 0px none rgb(0, 0, 0) !important;
+  border-bottom: 0px none rgb(0, 0, 0) !important;
+  border-top: 0px none rgb(0, 0, 0) !important;
+}
+
+.hiprint-printElement-hline {
+  border-top: 0.75pt solid #000;
+  border-right: 0px none rgb(0, 0, 0) !important;
+  border-bottom: 0px none rgb(0, 0, 0) !important;
+  border-left: 0px none rgb(0, 0, 0) !important;
+}
+
+.hiprint-printElement-oval, .hiprint-printElement-rect {
+  border: 0.75pt solid #000;
+}
+
+.hiprint-text-content-middle {
+}
+
+.hiprint-text-content-middle > div {
+  display: grid;
+  align-items: center;
+}
+
+.hiprint-text-content-bottom {
+}
+
+.hiprint-text-content-bottom > div {
+  display: grid;
+  align-items: flex-end;
+}
+
+.hiprint-text-content-wrap {
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {
+  white-space: nowrap;
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-clip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*hi-grid-row */
+.hi-grid-row {
+  position: relative;
+  height: auto;
+  margin-right: 0;
+  margin-left: 0;
+  zoom: 1;
+  display: block;
+  box-sizing: border-box;
+}
+
+.hi-grid-row::after, .hi-grid-row::before {
+  display: table;
+  content: '';
+  box-sizing: border-box;
+}
+
+.hi-grid-col {
+  display: block;
+  box-sizing: border-box;
+  position: relative;
+  float: left;
+  flex: 0 0 auto;
+}
+
+.table-grid-row {
+  margin-left: -0pt;
+  margin-right: -0pt;
+}
+
+.tableGridColumnsGutterRow {
+  padding-left: 0pt;
+  padding-right: 0pt;
+}
+
+.hiprint-gridColumnsFooter {
+  text-align: left;
+  clear: both;
+}

src/api/printdesign/printdesign.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 表单模板列表
+export const pageList = (query) => {
+    return request({
+      url: '/system/printTemplate/pageList',
+      method: 'get',
+      params: query
+    })
+  }
+  
+  // 添加修改小票模板
+  export const saveAndEdit = (data) => {
+    return request({
+      url: '/system/printTemplate/insertOrUpdate',
+      method: 'post',
+      data: data
+    })
+  }
+
+  // ID获取模板信息
+export const selectById = (id) => {
+    return request({
+      url: '/system/printTemplate/selectById',
+      method: 'get',
+      params: {id:id}
+    })
+  }
+
+  // 删除模板
+export const deleteById = (id) => {
+    return request({
+      url: '/system/printTemplate/deleteById',
+      method: 'delete',
+      params: {id:id}
+    })
+  }

src/hiprint/css/hiprint.css

@@ -0,0 +1,997 @@
+.hiprint-printPaper.design.grid {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%);
+  background-size: 5mm 5mm;
+  background-position: left top;
+}
+
+.horLine {
+  position: absolute;
+  border: 0;
+  border-top: 1px solid rgb(241, 110, 110);
+}
+.verLine {
+  position: absolute;
+  border: 0;
+  border-left: 1px solid rgb(241, 110, 110);
+}
+
+/* 拖拽时元素辅助线 */
+.toplineOfPosition, .bottomlineOfPosition {
+  border: 0;
+  border-top: 1px dashed  rgb(169, 169, 169);
+}
+.leftlineOfPosition, .rightlineOfPosition {
+  border: 0;
+  border-left: 1px dashed  rgb(169, 169, 169);
+}
+
+/* 拖拽时的坐标位置 */
+.topPosition {
+  background: red;
+  color: white;
+  border-radius: 20rem;
+  min-width: 10px;
+  padding: 0 2px;
+  font-size: 12px;
+  line-height: normal;
+  z-index: 9;
+}
+.topPosition-lineMode {
+  color: red;
+  background: unset;
+  line-height: normal;
+  z-index: 9;
+}
+.leftPosition {
+  background: red;
+  color: white;
+  border-radius: 20rem;
+  min-width: 10px;
+  padding: 0 2px;
+  font-size: 12px;
+  line-height: normal;
+  z-index: 9;
+}
+.leftPosition-lineMode {
+  color: red;
+  background: unset;
+  line-height: normal;
+  z-index: 9;
+}
+
+/* 元素始终隐藏 */
+.alwaysHide {
+  background-color: gray !important;
+}
+
+/* 元素宽高 */
+.resize-panel .size-box {
+  border: 1px solid;
+  min-height: 19px;
+  padding: 0px 4px;
+  background: red;
+  color: white;
+  font-size: 12px;
+  border-radius: 6px 6px 0 0;
+  white-space: nowrap;
+  line-height: normal;
+  font-family: unset;
+  letter-spacing: normal;
+  z-index: 9;
+}
+.hiprint-printElement:not(.editing):hover .resize-panel {
+  display: block !important;
+  /* hover 强制背景色 可重写 */
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+.hiprint-printElement:hover .resize-panel .resizebtn {
+  display: none;
+}
+.hiprint-printElement:hover .resize-panel.selected .resizebtn {
+  display: block;
+}
+.hiprint-printElement.design .del-btn {
+    position: absolute;
+    visibility: hidden;
+    z-index: 10;
+    width: 16px;
+    height: 16px;
+    line-height: 12px;
+    top: -8px;
+    right: -8px;
+    border-radius: 50%;
+    padding: 2px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: center;
+}
+.hiprint-printElement.design:hover .del-btn {
+  visibility: visible;
+}
+.resize-panel .size-box .hide {
+  display: none;
+}
+
+/* 参数tab */
+.prop-tabs {
+  background-color: #FFF;
+  border-style: none;
+  box-shadow: none;
+  border-color: #e6e6e6;
+}
+.prop-tabs .prop-tab-items {
+  height: 31px;
+  line-height: 31px;
+  padding: 2px 0 1px 2px;
+  list-style: none;
+  outline: 0;
+  border: 0;
+  text-decoration: none;
+  font-size: 100%;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  /*box-shadow: 0 1px 3px rgba(26, 26, 26, .1);*/
+  box-sizing: content-box;
+}
+.prop-tabs .prop-tab-items .prop-tab-item {
+  background-color: #FFF;
+  border-radius: 0;
+  padding: 0;
+  margin: 0 -1px 0 0;
+  display: inline-block;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.prop-tabs .prop-tab-items .prop-tab-item .tab-title {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.prop-tabs .prop-tab-items li.active {
+  border: none;
+  border-bottom: 2px solid #2196f3;
+  color: #2196f3;
+  height: 31px;
+  line-height: 30px;
+}
+
+.prop-tabs .hiprint-option-items.active {
+  display: flex;
+}
+
+.prop-tabs .hiprint-option-items {
+  display: none;
+  margin-top: 1px;
+  border: none;
+  background-color: #FFF;
+  overflow: auto;
+  /*height: calc(100vh - 150px);*/
+  padding: 0;
+}
+/* 元素双击编辑 */
+.design .editing {
+  border: 1px solid red !important;
+}
+
+/* hiprint-pagination */
+.hiprint-pagination {
+    display: inline-block;
+    padding-left: 0;
+}
+    .hiprint-pagination > li {
+        border: 1px solid #bdc3c7;
+        -moz-border-radius: 2px;
+        -webkit-border-radius: 2px;
+        display: block;
+        float: left;
+        padding: 5px;
+        text-decoration: none;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        font-family: helvetica;
+        font-size: 13px;
+        cursor: pointer
+    }
+
+        .hiprint-pagination > li > span {
+            padding: 0 10px 0 10px;
+        }
+
+        .hiprint-pagination > li > a {
+            color: #bdc3c7;
+            font-weight: bold;
+            text-decoration: none;
+            font-size: 11px;
+            padding: 3px;
+        }
+
+            .hiprint-pagination > li > a:hover {
+                color: red;
+            }
+
+.hiprint-pagination .selected {
+  border: #2196f3 1px solid;
+}
+
+
+.hiprint-pagination-sm > li > a {
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+}
+/*rect-printElement-type hiprint-printElement-type */
+.rect-printElement-types .hiprint-printElement-type {
+    display: block;
+}
+
+.rect-printElement-types .hiprint-printElement-type {
+    padding: 0 0 0 0;
+    list-style: none;
+}
+
+    .rect-printElement-types .hiprint-printElement-type > li > .title {
+        display: block;
+        padding: 4px 0px;
+        clear: both;
+    }
+
+    .rect-printElement-types .hiprint-printElement-type > li > ul {
+        padding: 0 0 0 0;
+        display: block;
+        list-style: none;
+    }
+
+        .rect-printElement-types .hiprint-printElement-type > li > ul > li {
+            display: block;
+            width: 50%;
+            float: left;
+            max-width: 100px;
+        }
+
+            .rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
+                height: 92px;
+                padding: 12px 6px;
+                margin-left: -1px;
+                line-height: 1.42857143;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 5px;
+                width: 95%;
+                max-width: 100px;
+                display: inline-block;
+                text-align: center;
+                margin-bottom: 7px;
+                box-sizing: border-box;
+                color: #b9a5a6;
+                border: 1px solid rgba(0,0,0,0.2);
+                border-radius: 3px;
+                box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
+            }
+
+
+/*small-printElement-type hiprint-printElement-type */
+.small-printElement-types .hiprint-printElement-type {
+    display: block;
+}
+
+.small-printElement-types .hiprint-printElement-type {
+    padding: 0 0 0 0;
+    list-style: none;
+}
+
+    .small-printElement-types .hiprint-printElement-type > li > .title {
+        display: block;
+        padding: 4px 0px;
+        clear: both;
+    }
+
+    .small-printElement-types .hiprint-printElement-type > li > ul {
+        padding: 0 0 0 0;
+        display: block;
+        list-style: none;
+        width: 100%;
+    }
+
+        .small-printElement-types .hiprint-printElement-type > li > ul > li {
+            display: block;
+            width: 50%;
+            float: left;
+            padding: 0 4px;
+        }
+
+            .small-printElement-types .hiprint-printElement-type > li > ul > li > a {
+                height: 22px;
+                /* padding: 12px 6px; */
+                /* margin-left: -1px; */
+                line-height: 20px;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 5px;
+                width: 100%;
+                display: block;
+                text-align: center;
+                margin-bottom: 7px;
+                box-sizing: border-box;
+                color: #b9a5a6;
+                border: 1px solid rgba(0,0,0,0.2);
+                border-radius: 3px;
+                box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
+            }
+
+
+/* hiprint-toolbar*/
+
+.hiprint-toolbar {
+}
+
+    .hiprint-toolbar > ul {
+        padding: 0px;
+        margin-bottom: 5px;
+    }
+
+        .hiprint-toolbar > ul > li {
+            display: inline-block;
+        }
+
+            .hiprint-toolbar > ul > li > a {
+                position: relative;
+                float: left;
+                padding: 3px 10px;
+                margin-left: -1px;
+                line-height: 1.42857143;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 4px;
+                cursor: pointer;
+            }
+
+
+.hiprint-printElement-type .glyphicon-class {
+    display: block;
+    text-align: center;
+    word-wrap: break-word;
+    /*font-size: 0.65rem;
+font-weight: normal;*/
+    font-family: Helvetica, sans-serif;
+}
+
+.hiprint-printElement-type .glyphicon {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-size: 37px;
+}
+
+
+/*
+
+
+*/
+
+/*option css*/
+/*option css*/
+.hiprint-option-items {
+    padding: 10px 5px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+    .hiprint-option-items .hiprint-option-item {
+        box-sizing: border-box;
+        float: left;
+        width: 50%;
+        margin-bottom: 5px;
+        padding: 0 5px;
+    }
+
+    .hiprint-option-items .hiprint-option-item-row {
+        width: 100%;
+    }
+
+.hiprint-option-item-label {
+    margin: 5px 5px 3px 0;
+}
+
+.hiprint-option-items .hiprint-option-item-field input, .hiprint-option-items .hiprint-option-item-field select, .hiprint-option-items .hiprint-option-item-field textarea {
+    color: inherit;
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    padding: 3px;
+    z-index: 1;
+    border: 1px solid rgb(169, 169, 169);
+    height: 19pt;
+}
+
+.hiprint-option-item-settingBtn {
+    height: 19pt;
+    line-height: 19pt;
+    font-size: 12px;
+    padding: 0 24px;
+    background: #00c1de;
+    border-color: transparent;
+    color: #fff;
+    display: inline-block;
+    margin: 5px;
+    font-weight: 400;
+    border: 1px solid transparent;
+    font-family: PingFangSC, helvetica neue, hiragino sans gb, arial, microsoft yahei ui, microsoft yahei, simsun, "sans-serif";
+    vertical-align: middle;
+    transition: .3s cubic-bezier(.4, 0, .2, 1);
+    transform: translateZ(0);
+}
+
+.hiprint-option-item-deleteBtn {
+    background: red;
+}
+
+.hiprint-option-items .minicolors {
+    position: relative;
+}
+
+.hiprint-option-items .minicolors-sprite {
+    background-image: url(./image/jquery.minicolors.png);
+}
+
+.hiprint-option-items .minicolors-swatch {
+    position: absolute;
+    vertical-align: middle;
+    background-position: -80px 0;
+    cursor: text;
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+}
+
+.hiprint-option-items .minicolors-swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.hiprint-option-items .minicolors input[type=hidden] + .minicolors-swatch {
+    width: 28px;
+    position: static;
+    cursor: pointer;
+}
+
+.hiprint-option-items .minicolors input[type=hidden][disabled] + .minicolors-swatch {
+    cursor: default;
+}
+
+/* Panel */
+.hiprint-option-items .minicolors-panel {
+    position: absolute;
+    width: 173px;
+    background: white;
+    border: solid 1px #CCC;
+    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+    z-index: 99999;
+    box-sizing: content-box;
+    display: none;
+}
+
+    .hiprint-option-items .minicolors-panel.minicolors-visible {
+        display: block;
+    }
+
+/* Panel positioning */
+.hiprint-option-items .minicolors-position-top .minicolors-panel {
+    top: -154px;
+}
+
+.hiprint-option-items .minicolors-position-right .minicolors-panel {
+    right: 0;
+}
+
+.hiprint-option-items .minicolors-position-bottom .minicolors-panel {
+    top: auto;
+}
+
+.hiprint-option-items .minicolors-position-left .minicolors-panel {
+    left: 0;
+}
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-panel {
+    width: 194px;
+}
+
+.hiprint-option-items .minicolors .minicolors-grid {
+    position: relative;
+    top: 1px;
+    left: 1px; /* LTR */
+    width: 150px;
+    height: 150px;
+    margin-bottom: 2px;
+    background-position: -120px 0;
+    cursor: crosshair;
+}
+
+.hiprint-option-items .minicolors .minicolors-grid-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 150px;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-grid {
+    background-position: -420px 0;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-grid-inner {
+    background-position: -270px 0;
+    background-image: inherit;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-grid {
+    background-position: -570px 0;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-grid-inner {
+    background-color: black;
+}
+
+.hiprint-option-items .minicolors-slider-wheel .minicolors-grid {
+    background-position: -720px 0;
+}
+
+.hiprint-option-items .minicolors-slider,
+.hiprint-option-items .minicolors-opacity-slider {
+    position: absolute;
+    top: 1px;
+    left: 152px; /* LTR */
+    width: 20px;
+    height: 150px;
+    background-color: white;
+    background-position: 0 0;
+    cursor: row-resize;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-slider {
+    background-position: -60px 0;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-slider {
+    background-position: -20px 0;
+}
+
+.hiprint-option-items .minicolors-slider-wheel .minicolors-slider {
+    background-position: -20px 0;
+}
+
+.hiprint-option-items .minicolors-opacity-slider {
+    left: 173px; /* LTR */
+    background-position: -40px 0;
+    display: none;
+}
+
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-opacity-slider {
+    display: block;
+}
+
+/* Pickers */
+.hiprint-option-items .minicolors-grid .minicolors-picker {
+    position: absolute;
+    top: 70px;
+    left: 70px;
+    width: 12px;
+    height: 12px;
+    border: solid 1px black;
+    border-radius: 10px;
+    margin-top: -6px;
+    margin-left: -6px;
+    background: none;
+}
+
+    .hiprint-option-items .minicolors-grid .minicolors-picker > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        border: solid 2px white;
+        box-sizing: content-box;
+    }
+
+.hiprint-option-items .minicolors-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 2px;
+    background: white;
+    border: solid 1px black;
+    margin-top: -2px;
+    box-sizing: content-box;
+}
+
+/* Swatches */
+.hiprint-option-items .minicolors-swatches,
+.hiprint-option-items .minicolors-swatches li {
+    margin: 5px 0 3px 5px; /* LTR */
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
+}
+
+    .hiprint-option-items .minicolors-swatches .minicolors-swatch {
+        position: relative;
+        float: left; /* LTR */
+        cursor: pointer;
+        margin: 0 4px 0 0; /* LTR */
+    }
+
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+    margin-right: 7px; /* LTR */
+}
+
+
+.hiprint-option-items .minicolors-swatch.selected {
+    border-color: #000;
+}
+
+/* Inline controls */
+.hiprint-option-items .minicolors-inline {
+    display: inline-block;
+}
+
+    .hiprint-option-items .minicolors-inline .minicolors-input {
+        display: none !important;
+    }
+
+    .hiprint-option-items .minicolors-inline .minicolors-panel {
+        position: relative;
+        top: auto;
+        left: auto; /* LTR */
+        box-shadow: none;
+        z-index: auto;
+        display: inline-block;
+    }
+
+
+
+/* Bootstrap theme */
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch {
+    z-index: 2;
+    top: 3px;
+    left: 3px;
+    width: 17px;
+    height: 17px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+    margin-bottom: 2px;
+    top: 0;
+    left: 0; /* LTR */
+    width: 20px;
+    height: 20px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch-color {
+    border-radius: inherit;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+    left: auto; /* LTR */
+    right: 3px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input {
+    float: none;
+    padding-left: 23px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+    padding-right: 44px; /* LTR */
+    padding-left: 12px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+    top: 4px;
+    left: 4px; /* LTR */
+    width: 37px;
+    height: 37px;
+    border-radius: 5px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
+    width: 24px;
+    height: 24px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
+    width: 18px;
+    height: 18px;
+}
+
+.hiprint-option-items .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+    border-top-left-radius: 0; /* LTR */
+    border-bottom-left-radius: 0; /* LTR */
+}
+
+
+
+/*hitable reizer*/
+.hitable {
+}
+
+
+
+    .hitable .selected {
+        background: #3e66ad;
+    }
+
+
+    /*resizer*/
+    .hitable tr.resizerRow,
+    .hitable .resizerRow td {
+        border: 0pt dashed;
+        height: 0pt;
+        background: #fff;
+    }
+
+        .hitable tr.resizerRow + tr,
+        .hitable tr.resizerRow + tr td {
+            border-top: 0px !important;
+        }
+
+    .hitable td.resizerColumn {
+        border: 0pt dashed;
+        width: 0.000001px !important;
+        background: #fff;
+    }
+
+
+        .hitable td.resizerColumn + td {
+            border-left: 0px !important;
+        }
+
+
+/*GRIP*/
+
+.columngrips {
+    height: 0px;
+    position: absolute;
+}
+
+.columngrip {
+    margin-left: -5px;
+    position: absolute;
+    z-index: 5;
+    width: 10px;
+}
+
+    .columngrip .gripResizer {
+        position: absolute;
+        filter: alpha(opacity=1);
+        opacity: 0;
+        width: 10px;
+        height: 100%;
+        cursor: col-resize;
+        top: 0px;
+    }
+
+.columngripDraging {
+    border-left: 1px dotted black;
+}
+
+.rowgrips {
+    height: 0px;
+    width: 0px;
+    position: absolute;
+}
+
+.rowgrip {
+    margin-top: -5px;
+    position: absolute;
+    z-index: 5;
+    height: 10px;
+}
+
+    .rowgrip .gripResizer {
+        position: absolute;
+        filter: alpha(opacity=1);
+        opacity: 0;
+        height: 10px;
+        width: 100%;
+        cursor: row-resize;
+        left: 0px;
+    }
+
+.rowgripDraging {
+    border-top: 1px dotted black;
+}
+
+.hitable .hitable-editor-text {
+    border: 1px solid;
+    width: 95%;
+    height: 80%;
+}
+
+
+
+
+.hipanel-disable {
+    height: 0px;
+    display: block !important;
+    top: 8500px;
+    width: 0px;
+    overflow: hidden;
+    position: absolute;
+}
+
+.hiprint_rul_wrapper {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    border: 0;
+    border-top: 1px solid rgb(201, 190, 190);
+    border-left: 1px solid rgb(201, 190, 190);
+    padding-left: 15px;
+	padding-top:15px;
+    margin: -16px;
+	box-sizing: content-box!important;
+}
+
+    .hiprint_rul_wrapper .h_img {
+        position: absolute;
+        top: 0px;
+        left: 15px;
+        width: 400mm;
+        height: 15px;
+        max-width: none;
+    }
+
+    .hiprint_rul_wrapper .v_img {
+        width: 400mm;
+        max-width: none;
+        transform: rotate(90deg);
+        transform-origin: 0 100%;
+        height: 15px;
+        position: absolute;
+        top: -2px;
+        left: 0px;
+    }
+
+/*hiprint-option-table*/
+
+.hiprint-option-table-selected-columns {
+    color: inherit;
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    padding: 0px;
+    list-style: none;
+}
+
+    .hiprint-option-table-selected-columns .hiprint-option-table-selected-item {
+        color: inherit;
+        background-color: transparent;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 3px;
+        border: 1px solid rgb(169, 169, 169);
+        line-height: 19pt;
+        margin: 3px 0;
+    }
+    .hiprint-option-table-selected-columns .hiprint-option-table-selected-item .column-title {
+      display: inline-block;
+      min-width: calc(100% - 3rem);
+    }
+/*hi-pretty */
+.hi-pretty * {
+    box-sizing: border-box;
+}
+
+.hi-pretty input:not([type='checkbox']):not([type='radio']) {
+    display: none;
+}
+
+.hi-pretty {
+    position: relative;
+    display: inline-block;
+    margin-right: 1em;
+    white-space: nowrap;
+    line-height: 1;
+}
+
+    .hi-pretty input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        min-width: 1em;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .hi-pretty .state label {
+        position: initial;
+        display: inline-block;
+        font-weight: normal;
+        margin: 0;
+        text-indent: 1.5em;
+        min-width: calc(1em + 2px);
+    }
+
+        .hi-pretty .state label:before,
+        .hi-pretty .state label:after {
+            content: '';
+            width: calc(1em + 2px);
+            height: calc(1em + 2px);
+            display: block;
+            box-sizing: border-box;
+            border-radius: 0;
+            border: 1px solid transparent;
+            z-index: 0;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background-color: transparent;
+        }
+
+        .hi-pretty .state label:before {
+            border-color: #bdc3c7;
+        }
+
+    .hi-pretty .state.p-is-hover,
+    .hi-pretty .state.p-is-indeterminate {
+        display: none;
+    }
+
+
+    .hi-pretty.p-default.p-fill .state label:after {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+
+    .hi-pretty.p-default .state label:after {
+        -webkit-transform: scale(0.6);
+        -ms-transform: scale(0.6);
+        transform: scale(0.6);
+    }
+
+    .hi-pretty.p-default input:checked ~ .state label:after {
+        background-color: #bdc3c7 !important;
+    }
+
+    .hi-pretty.p-default.p-thick .state label:before,
+    .hi-pretty.p-default.p-thick .state label:after {
+        border-width: calc(1em / 7);
+    }
+
+    .hi-pretty.p-default.p-thick .state label:after {
+        -webkit-transform: scale(0.4) !important;
+        -ms-transform: scale(0.4) !important;
+        transform: scale(0.4) !important;
+    }

src/hiprint/css/print-lock.css

@@ -0,0 +1,349 @@
+@media print {
+  body {
+    margin: 0px;
+    padding: 0px;
+  }
+}
+
+@page {
+  margin: 0;
+}
+
+.hiprint-printPaper * {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box; /* Firefox */
+  -webkit-box-sizing: border-box; /* Safari */
+}
+
+.hiprint-printPaper *:focus {
+  outline: -webkit-focus-ring-color auto 0px;
+}
+
+.hiprint-printPaper {
+  position: relative;
+  padding: 0 0 0 0;
+  page-break-after: always;
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -moz-user-select: none; /* Firefox */
+  user-select: none;
+  overflow-x: hidden;
+  overflow: hidden;
+}
+
+.hiprint-printPaper .hiprint-printPaper-content {
+  position: relative;
+}
+
+/* 火狐浏览器打印 第一页过后 重叠问题 */
+@-moz-document url-prefix() {
+  .hiprint-printPaper .hiprint-printPaper-content {
+    position: relative;
+    margin-top: 20px;
+    top: -20px
+  }
+}
+
+.hiprint-printPaper.design {
+  overflow: visible;
+}
+
+
+.hiprint-printTemplate .hiprint-printPanel {
+  page-break-after: always;
+}
+
+.hiprint-printPaper, hiprint-printPanel {
+  box-sizing: border-box;
+  border: 0px;
+}
+
+.hiprint-printPanel .hiprint-printPaper:last-child {
+  page-break-after: avoid;
+}
+
+.hiprint-printTemplate .hiprint-printPanel:last-child {
+  page-break-after: avoid;
+}
+
+.hiprint-printPaper .hideheaderLinetarget {
+  border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper .hidefooterLinetarget {
+  border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper.design {
+  border: 1px dashed rgba(170, 170, 170, 0.7);
+}
+
+.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.design .resize-panel {
+  box-sizing: border-box;
+  border: 1px dotted;
+}
+
+.hiprint-printElement-text {
+  background-color: transparent;
+  background-repeat: repeat;
+  padding: 0 0 0 0;
+  border: 0.75pt none rgb(0, 0, 0);
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  line-height: 9.75pt;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.design .hiprint-printElement-text-content {
+  border: 1px dashed rgb(206, 188, 188);
+  box-sizing: border-box;
+}
+
+.hiprint-printElement-longText {
+  background-color: transparent;
+  background-repeat: repeat;
+  border: 0.75pt none rgb(0, 0, 0);
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  line-height: 9.75pt;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+  /*white-space: pre-wrap*/
+}
+
+
+.hiprint-printElement-table {
+  background-color: transparent;
+  background-repeat: repeat;
+  color: rgb(0, 0, 0);
+  border-color: rgb(0, 0, 0);
+  border-style: none;
+  direction: ltr;
+  font-family: 'SimSun';
+  font-size: 9pt;
+  font-style: normal;
+  font-weight: normal;
+  padding-bottom: 0pt;
+  padding-left: 0pt;
+  padding-right: 0pt;
+  padding-top: 0pt;
+  text-align: left;
+  text-decoration: none;
+  padding: 0 0 0 0;
+  box-sizing: border-box;
+  line-height: 9.75pt;
+}
+
+.hiprint-printElement-table thead {
+  background: #e8e8e8;
+  font-weight: 700;
+}
+
+table.hiprint-printElement-tableTarget {
+  width: 100%;
+}
+
+.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
+  border-color: rgb(0, 0, 0);
+  /*border-style: none;*/
+  /*border: 1px solid rgb(0, 0, 0);*/
+  font-weight: normal;
+  direction: ltr;
+  padding-bottom: 0pt;
+  padding-left: 4pt;
+  padding-right: 4pt;
+  padding-top: 0pt;
+  text-decoration: none;
+  vertical-align: middle;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+  /*line-height: 9.75pt;
+  font-size: 9pt;*/
+}
+
+.hiprint-printElement-tableTarget-border-all {
+  border: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-none {
+  border: 0px solid;
+}
+.hiprint-printElement-tableTarget-border-lr {
+  border-left: 1px solid;
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-left {
+  border-left: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-right {
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-tb {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-top {
+  border-top: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-bottom {
+  border-bottom: 1px solid;
+}
+
+.hiprint-printElement-tableTarget-border-td-none td {
+  border: 0px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) {
+  border-right: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:last-child {
+  border-left: 1px solid;
+}
+.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {
+  border-left: none;
+}
+
+/*.hiprint-printElement-tableTarget tr,*/
+.hiprint-printElement-tableTarget td {
+  height: 18pt;
+}
+
+.hiprint-printPaper .hiprint-paperNumber {
+  font-size: 9pt;
+}
+
+.design .hiprint-printElement-table-handle {
+  position: absolute;
+  height: 21pt;
+  width: 21pt;
+  background: red;
+  z-index: 1;
+}
+
+.hiprint-printPaper .hiprint-paperNumber-disabled {
+  float: right !important;
+  right: 0 !important;
+  color: gainsboro !important;
+}
+
+.hiprint-printElement-vline, .hiprint-printElement-hline {
+  border: 0px none rgb(0, 0, 0);
+
+}
+
+.hiprint-printElement-vline {
+  border-left: 0.75pt solid #000;
+  border-right: 0px none rgb(0, 0, 0) !important;
+  border-bottom: 0px none rgb(0, 0, 0) !important;
+  border-top: 0px none rgb(0, 0, 0) !important;
+}
+
+.hiprint-printElement-hline {
+  border-top: 0.75pt solid #000;
+  border-right: 0px none rgb(0, 0, 0) !important;
+  border-bottom: 0px none rgb(0, 0, 0) !important;
+  border-left: 0px none rgb(0, 0, 0) !important;
+}
+
+.hiprint-printElement-oval, .hiprint-printElement-rect {
+  border: 0.75pt solid #000;
+}
+
+.hiprint-text-content-middle {
+}
+
+.hiprint-text-content-middle > div {
+  display: grid;
+  align-items: center;
+}
+
+.hiprint-text-content-bottom {
+}
+
+.hiprint-text-content-bottom > div {
+  display: grid;
+  align-items: flex-end;
+}
+
+.hiprint-text-content-wrap {
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {
+  white-space: nowrap;
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-clip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*hi-grid-row */
+.hi-grid-row {
+  position: relative;
+  height: auto;
+  margin-right: 0;
+  margin-left: 0;
+  zoom: 1;
+  display: block;
+  box-sizing: border-box;
+}
+
+.hi-grid-row::after, .hi-grid-row::before {
+  display: table;
+  content: '';
+  box-sizing: border-box;
+}
+
+.hi-grid-col {
+  display: block;
+  box-sizing: border-box;
+  position: relative;
+  float: left;
+  flex: 0 0 auto;
+}
+
+.table-grid-row {
+  margin-left: -0pt;
+  margin-right: -0pt;
+}
+
+.tableGridColumnsGutterRow {
+  padding-left: 0pt;
+  padding-right: 0pt;
+}
+
+.hiprint-gridColumnsFooter {
+  text-align: left;
+  clear: both;
+}

src/hiprint/etypes/default-etyps-provider.js

@@ -0,0 +1,153 @@
+export default function (hiprint) {
+  return function (options) {
+    var addElementTypes = function (context) {
+      context.removePrintElementTypes("defaultModule");
+      context.addPrintElementTypes("defaultModule", [
+        new hiprint.PrintElementTypeGroup("常规", [
+          {
+            tid: "defaultModule.text",
+            title: "文本",
+            data: "",
+            type: "text"
+          },
+          {
+            tid: "defaultModule.image",
+            title: "图片",
+            data: "",
+            type: "image"
+          },
+          {
+            tid: "defaultModule.longText",
+            title: "长文",
+            data: "155123456789",
+            type: "longText"
+          },
+          {
+            tid: "defaultModule.table",
+            field: "table",
+            title: "表格",
+            type: "table",
+            groupFields: ["name"],
+            groupFooterFormatter: function (group, option) {
+              return "这里自定义统计脚信息";
+            },
+            columns: [
+              [
+                {
+                  title: "行号",
+                  fixed: true,
+                  rowspan: 2,
+                  field: "id",
+                  width: 70
+                },
+                {title: "人员信息", colspan: 2},
+                {title: "销售统计", colspan: 2}
+              ],
+              [
+                {
+                  title: "姓名",
+                  align: "left",
+                  field: "name",
+                  width: 100
+                },
+                {title: "性别", field: "gender", width: 100},
+                {
+                  title: "销售数量",
+                  field: "count",
+                  width: 100
+                },
+                {
+                  title: "销售金额",
+                  field: "amount",
+                  width: 100
+                }
+              ]
+            ],
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            isEnableEditField: true, //编辑字段
+            isEnableContextMenu: true, //开启右键菜单 默认true
+            isEnableInsertRow: true, //插入行
+            isEnableDeleteRow: true, //删除行
+            isEnableInsertColumn: true, //插入列
+            isEnableDeleteColumn: true, //删除列
+            isEnableMergeCell: true, //合并单元格
+          },
+          {
+            tid: "defaultModule.emptyTable",
+            title: "空白表格",
+            type: "table",
+            columns: [
+              [
+                {
+                  title: "",
+                  field: "",
+                  width: 100
+                },
+                {
+                  title: "",
+                  field: "",
+                  width: 100
+                }
+              ]
+            ],
+          },
+          {
+            tid: "defaultModule.html",
+            title: "html",
+            formatter: function (data, options) {
+              return '<div style="height:50pt;width:50pt;background:red;border-radius: 50%;"></div>';
+            },
+            type: "html"
+          },
+          {
+            tid: "defaultModule.customText",
+            title: "自定义文本",
+            customText: "自定义文本",
+            custom: true,
+            type: "text"
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: "defaultModule.hline",
+            title: "横线",
+            type: "hline"
+          },
+          {
+            tid: "defaultModule.vline",
+            title: "竖线",
+            type: "vline"
+          },
+          {
+            tid: "defaultModule.rect",
+            title: "矩形",
+            type: "rect"
+          },
+          {
+            tid: "defaultModule.oval",
+            title: "椭圆",
+            type: "oval"
+          },
+          {
+            tid: 'defaultModule.barcode',
+            title: '条形码',
+            type: 'barcode',
+          },
+          {
+            tid: 'defaultModule.qrcode',
+            title: '二维码',
+            type: 'qrcode',
+          }
+        ])
+      ]);
+    };
+    return {
+      addElementTypes: addElementTypes
+    };
+  };
+};

src/hiprint/plugins/jquery.hiwprint.js

@@ -0,0 +1,116 @@
+(function ($) {
+  $.fn.hiwprint = function (options) {
+    var usedFrame = document.getElementById('hiwprint_iframe');
+    if (usedFrame) usedFrame.parentNode.removeChild(usedFrame);
+    var opt = $.extend({}, $.fn.hiwprint.defaults, options);
+    var $element = this;
+    var $iframe = $('<iframe id="hiwprint_iframe"  style="visibility: hidden; height: 0; width: 0; position: absolute;"></iframe>');
+    var css = '';
+    if (opt.importCss) {
+      if (opt.styleHandler) {
+        css += opt.styleHandler()
+      }
+      if ($("link[media=print]").length > 0) {
+        $("link[media=print]").each(function () {
+          if ($(this).attr("href").indexOf('print-lock.css') >= 0) {
+            css += '<link rel="stylesheet" type="text/css" media="print" href="' + $(this).attr("href") + '">';
+            // ↑若加上media="print",仅对浏览器打印时有效 所以查看iframe页面时样式无效
+            css += '<link rel="stylesheet" type="text/css" href="' + $(this).attr("href") + '">';
+          }
+        });
+      }
+    }
+    $iframe[0].srcdoc = '<!DOCTYPE html><html><head><title></title><meta charset="UTF-8">' + css + '</head><body></body></html>';
+
+    $iframe[0].onload = function () {
+      var printDocument = $iframe[0].contentWindow || $iframe[0].contentDocument;
+      if (printDocument.document) printDocument = printDocument.document;
+      if (!$iframe.attr('srcdoc')) {
+        printDocument.write('<!DOCTYPE html><html><head><title></title><meta charset="UTF-8">' + css + '</head><body></body></html>');
+      }
+      if (opt.printContainer) {
+        printDocument.body.innerHTML = $element[0].outerHTML;
+      } else {
+        printDocument.body.innerHTML = $element.html();
+      }
+      loadAllImages(printDocument, function () {
+
+        performPrint($iframe[0], opt);
+      });
+
+    };
+
+    $iframe.appendTo("body");
+
+  };
+
+  $.fn.hiwprint.defaults = {
+    importCss: true,
+    printContainer: true,
+    callback: null,
+    styleHandler: null,
+  };
+
+  function performPrint(iframeElement, opt) {
+    try {
+      iframeElement.focus();
+      if (isEdge() || isIE()) {
+        try {
+          iframeElement.contentWindow.document.execCommand('print', false, null);
+        } catch (e) {
+          iframeElement.contentWindow.print();
+        }
+      } else {
+        // Other browsers
+        iframeElement.contentWindow.print();
+      }
+      if (opt.callback) {
+        opt.callback()
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+
+  function isIE() {
+    return navigator.userAgent.indexOf('MSIE') !== -1 || !!document.documentMode;
+  }
+
+  // Edge 20+
+  function isEdge() {
+    return !isIE() && !!window.StyleMedia;
+  }
+
+
+  function loadAllImages(printDocument, callback, time) {
+
+    if (time === undefined) {
+      time = 0;
+    }
+    var images = printDocument.getElementsByTagName('img');
+    var allLoaded = true;
+    for (var i = 0; i < images.length; i++) {
+      var image = images[i];
+      if (image.src && image.src !== window.location.href && image.src.indexOf('base64') == -1) {
+
+        if (!image || typeof image.naturalWidth === 'undefined' || image.naturalWidth === 0 || !image.complete) {
+          if (!image.complete) {
+            allLoaded = false;
+          }
+        }
+      }
+    }
+    time++;
+    if (!allLoaded && time < 10) {
+
+      setTimeout(function () {
+        loadAllImages(printDocument, callback, time);
+      }, 500);
+    } else {
+      callback();
+    }
+  }
+
+
+})(jQuery);

src/hiprint/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
+}

src/i18n/cn.json

@@ -0,0 +1,251 @@
+{
+  "请选择字段": "请选择字段",
+  "计数": "计数",
+  "合计": "合计",
+  "平均值": "平均值",
+  "最小值": "最小值",
+  "最大值": "最大值",
+  "此格式不支持该文本": "此格式不支持该文本",
+  "二维码生成失败": "二维码生成失败",
+  "字体行高": "字体行高",
+  "默认": "默认",
+  "字体": "字体",
+  "宋体": "宋体",
+  "微软雅黑": "微软雅黑",
+  "字体大小": "字体大小",
+  "字体粗细": "字体粗细",
+  "更细": "更细",
+  "粗体": "粗体",
+  "粗体+": "粗体+",
+  "字间距": "字间距",
+  "左右对齐": "左右对齐",
+  "居左": "居左",
+  "居中": "居中",
+  "居右": "居右",
+  "两端对齐": "两端对齐",
+  "标题显示隐藏": "标题显示隐藏",
+  "显示": "显示",
+  "隐藏": "隐藏",
+  "表格边框": "表格边框",
+  "有边框": "有边框",
+  "无边框": "无边框",
+  "表头边框": "表头边框",
+  "左边框": "左边框",
+  "右边框": "右边框",
+  "左右边框": "左右边框",
+  "上边框": "上边框",
+  "下边框": "下边框",
+  "上下边框": "上下边框",
+  "表头单元格边框": "表头单元格边框",
+  "表尾边框": "表尾边框",
+  "表尾单元格边框": "表尾单元格边框",
+  "表头行高": "表头行高",
+  "表头字体大小": "表头字体大小",
+  "表头字体粗细": "表头字体粗细",
+  "表体单元格边框": "表体单元格边框",
+  "表体行高": "表体行高",
+  "表头背景": "表头背景",
+  "线宽": "线宽",
+  "边框大小": "边框大小",
+  "条形码格式": "条形码格式",
+  "商品条码": "商品条码",
+  "条形码": "条形码",
+  "物流": "物流",
+  "邮政和快递编码": "邮政和快递编码",
+  "医疗产品编码": "医疗产品编码",
+  "不常用编码": "不常用编码",
+  "附加组件": "附加组件",
+  "实验编码": "实验编码",
+  "条码类型": "条码类型",
+  "二维码类型": "二维码类型",
+  "二维码容错率": "二维码容错率",
+  "字体颜色": "字体颜色",
+  "文本修饰": "文本修饰",
+  "下划线": "下划线",
+  "上划线": "上划线",
+  "穿梭线": "穿梭线",
+  "字段名": "字段名",
+  "请输入字段名": "请输入字段名",
+  "标题": "标题",
+  "请输入标题": "请输入标题",
+  "测试数据": "测试数据",
+  "仅字段名称存在时有效": "仅字段名称存在时有效",
+  "位置坐标": "位置坐标",
+  "X位置(左)": "X位置(左)",
+  "Y位置(上)": "Y位置(上)",
+  "同步": "同步",
+  "不同步": "不同步",
+  "宽高大小": "宽高大小",
+  "宽": "宽",
+  "高": "高",
+  "图片地址": "图片地址",
+  "请输入图片地址": "请输入图片地址",
+  "选择": "选择",
+  "图片缩放": "图片缩放",
+  "等比": "等比",
+  "裁切": "裁切",
+  "填充": "填充",
+  "原始尺寸": "原始尺寸",
+  "颜色": "颜色",
+  "边框颜色": "边框颜色",
+  "水印功能": "水印功能",
+  "水印内容": "水印内容",
+  "旋转角度": "旋转角度",
+  "水平密度": "水平密度",
+  "垂直密度": "垂直密度",
+  "水印时间": "水印时间",
+  "时间格式": "时间格式",
+  "页码格式": "页码格式",
+  "显示页码": "显示页码",
+  "页码续排": "页码续排",
+  "续排": "续排",
+  "重排": "重排",
+  "每行缩进": "每行缩进",
+  "显示规则": "显示规则",
+  "始终隐藏": "始终隐藏",
+  "首页": "首页",
+  "奇数页": "奇数页",
+  "偶数页": "偶数页",
+  "尾页": "尾页",
+  "强制分页": "强制分页",
+  "是": "是",
+  "否": "否",
+  "打印规则": "打印规则",
+  "保持奇数": "保持奇数",
+  "保持偶数": "保持偶数",
+  "分页规则": "分页规则",
+  "不分页": "不分页",
+  "移除段落左侧空白": "移除段落左侧空白",
+  "移除": "移除",
+  "不移除": "不移除",
+  "首页页尾": "首页页尾",
+  "尾页页尾": "尾页页尾",
+  "偶数页页尾": "偶数页页尾",
+  "奇数页页尾": "奇数页页尾",
+  "位置固定": "位置固定",
+  "拖动方向": "拖动方向",
+  "横向": "横向",
+  "竖向": "竖向",
+  "左偏移": "左偏移",
+  "偏移量": "偏移量",
+  "最低高度": "最低高度",
+  "文本过短或为空时的高度": "文本过短或为空时的高度",
+  "隐藏规则": "隐藏规则",
+  "表体行边框": "表体行边框",
+  "元素层级": "元素层级",
+  "边框设置": "边框设置",
+  "实线": "实线",
+  "虚线": "虚线",
+  "左内边距": "左内边距",
+  "上内边距": "上内边距",
+  "右内边距": "右内边距",
+  "下内边距": "下内边距",
+  "样式": "样式",
+  "边框样式": "边框样式",
+  "长虚线": "长虚线",
+  "短虚线": "短虚线",
+  "背景颜色": "背景颜色",
+  "纸张方向(仅自定义纸质有效)": "纸张方向(仅自定义纸质有效)",
+  "纵向": "纵向",
+  "上下对齐": "上下对齐",
+  "垂直居中": "垂直居中",
+  "底部": "底部",
+  "文本换行": "文本换行",
+  "不换行": "不换行",
+  "不换行&隐藏": "不换行&隐藏",
+  "不换行&省略": "不换行&省略",
+  "打印类型": "打印类型",
+  "文本": "文本",
+  "二维码": "二维码",
+  "字段类型": "字段类型",
+  "默认(文本)": "默认(文本)",
+  "序号": "序号",
+  "图片": "图片",
+  "单元格高度": "单元格高度",
+  "条形码、二维码以及图片有效": "条形码、二维码以及图片有效",
+  "底部聚合标题": "底部聚合标题",
+  "底部聚合文本": "底部聚合文本",
+  "聚合类型": "聚合类型",
+  "底部聚合合并列数": "底部聚合合并列数",
+  "合并列数": "合并列数",
+  "底部聚合类型左右对齐": "底部聚合类型左右对齐",
+  "整数": "整数",
+  "保留%s位": "保留%s位",
+  "底部聚合小数": "底部聚合小数",
+  "底部聚合格式化函数": "底部聚合格式化函数",
+  "转大小写": "转大小写",
+  "底部聚合类型": "底部聚合类型",
+  "不聚合": "不聚合",
+  "仅文本": "仅文本",
+  "顶部偏移": "顶部偏移",
+  "一行多组": "一行多组",
+  "一行二列": "一行二列",
+  "一行三列": "一行三列",
+  "一行四列": "一行四列",
+  "一行多组间隔": "一行多组间隔",
+  "表格头显示": "表格头显示",
+  "每页显示": "每页显示",
+  "首页显示": "首页显示",
+  "不显示": "不显示",
+  "数据类型": "数据类型",
+  "日期时间": "日期时间",
+  "布尔": "布尔",
+  "格式": "格式",
+  "格式化函数": "格式化函数",
+  "样式函数": "样式函数",
+  "行/列合并函数": "行/列合并函数",
+  "跨页合并是否清除": "跨页合并是否清除",
+  "表格脚函数": "表格脚函数",
+  "分组字段函数": "分组字段函数",
+  "分组头格式化函数": "分组头格式化函数",
+  "分组头信息": "分组头信息",
+  "分组脚格式化函数": "分组脚格式化函数",
+  "分组脚信息": "分组脚信息",
+  "多组表格脚函数": "多组表格脚函数",
+  "行样式函数": "行样式函数",
+  "单元格左右对齐": "单元格左右对齐",
+  "单元格上下对齐": "单元格上下对齐",
+  "上": "上",
+  "中": "中",
+  "表格头单元格左右对齐": "表格头单元格左右对齐",
+  "单元格样式函数": "单元格样式函数",
+  "表格头样式函数": "表格头样式函数",
+  "单元格格式化函数": "单元格格式化函数",
+  "单元格渲染函数": "单元格渲染函数",
+  "自动补全": "自动补全",
+  "每页最大行数": "每页最大行数",
+  "表格脚显示": "表格脚显示",
+  "最后显示": "最后显示",
+  "没有足够空间进行表格分页，请调整页眉/页脚线": "没有足够空间进行表格分页，请调整页眉/页脚线",
+  "没有足够空间,显示下方内容, 可分页高度": "没有足够空间,显示下方内容, 可分页高度",
+  "列属性": "列属性",
+  "在上方插入行": "在上方插入行",
+  "在下方插入行": "在下方插入行",
+  "向左方插入列": "向左方插入列",
+  "向右方插入列": "向右方插入列",
+  "删除行": "删除行",
+  "删除列": "删除列",
+  "对齐": "对齐",
+  "左": "左",
+  "左右居中": "左右居中",
+  "右": "右",
+  "下": "下",
+  "合并单元格": "合并单元格",
+  "解开单元格": "解开单元格",
+  "条形码生成失败": "条形码生成失败",
+  "请检查 hiprint.init 的 provider 是否配置了": "请检查 hiprint.init 的 provider 是否配置了",
+  "已移除'tableCustom',请替换使用'table'详情见更新记录": "已移除'tableCustom',请替换使用'table'详情见更新记录",
+  "确定": "确定",
+  "删除": "删除",
+  "连接客户端失败": "连接客户端失败",
+  "基础": "基础",
+  "边框": "边框",
+  "列": "列",
+  "高级": "高级",
+  "面板排列": "面板排列",
+  "排列方式": "排列方式",
+  "垂直间距%s": "垂直间距%s",
+  "水平间距%s": "水平间距%s",
+  "边框圆角": "边框圆角",
+  "条码颜色": "条码颜色"
+}

src/i18n/cn_tw.json

@@ -0,0 +1,250 @@
+{
+    "请选择字段": "請選擇欄位",
+    "计数": "計數",
+    "合计": "合計",
+    "平均值": "平均值",
+    "最小值": "最小值",
+    "最大值": "最大值",
+    "此格式不支持该文本": "此格式不支援該文字",
+    "二维码生成失败": "二維碼產生失敗",
+    "字体行高": "字體行高",
+    "默认": "預設",
+    "字体": "字型",
+    "宋体": "宋體",
+    "微软雅黑": "微軟雅黑",
+    "字体大小": "字型大小",
+    "字体粗细": "字型粗細",
+    "更细": "更細",
+    "粗体": "粗體",
+    "粗体+": "粗體+",
+    "字间距": "字間距",
+    "左右对齐": "左右對齊",
+    "居左": "靠左",
+    "居中": "置中",
+    "居右": "靠右",
+    "两端对齐": "兩端對齊",
+    "标题显示隐藏": "標題顯示隱藏",
+    "显示": "顯示",
+    "隐藏": "隱藏",
+    "表格边框": "表格邊框",
+    "有边框": "有邊框",
+    "无边框": "無邊框",
+    "表头边框": "表頭邊框",
+    "左边框": "左邊框",
+    "右边框": "右邊框",
+    "左右边框": "左右邊框",
+    "上边框": "上邊框",
+    "下边框": "下邊框",
+    "上下边框": "上下邊框",
+    "表头单元格边框": "表頭儲存格邊框",
+    "表尾边框": "表尾邊框",
+    "表尾单元格边框": "表尾儲存格邊框",
+    "表头行高": "表頭列高",
+    "表头字体大小": "表頭字型大小",
+    "表头字体粗细": "表頭字型粗細",
+    "表体单元格边框": "表體儲存格邊框",
+    "表体行高": "表體列高",
+    "表头背景": "表頭背景",
+    "线宽": "線寬",
+    "边框大小": "邊框大小",
+    "条形码格式": "條碼格式",
+    "商品条码": "商品條碼",
+    "条形码": "條碼",
+    "物流": "物流",
+    "邮政和快递编码": "郵政和快遞編碼",
+    "医疗产品编码": "醫療產品編碼",
+    "不常用编码": "不常用編碼",
+    "附加组件": "附加元件",
+    "实验编码": "實驗編碼",
+    "条码类型": "條碼類型",
+    "二维码类型": "二維碼類型",
+    "二维码容错率": "二維碼容錯率",
+    "字体颜色": "字型顏色",
+    "文本修饰": "文字修飾",
+    "下划线": "底線",
+    "上划线": "上線",
+    "穿梭线": "穿梭線",
+    "字段名": "欄位名稱",
+    "请输入字段名": "請輸入欄位名稱",
+    "标题": "標題",
+    "请输入标题": "請輸入標題",
+    "测试数据": "測試資料",
+    "仅字段名称存在时有效": "僅欄位名稱存在時有效",
+    "位置坐标": "位置座標",
+    "X位置(左)": "X位置(左)",
+    "Y位置(上)": "Y位置(上)",
+    "同步": "同步",
+    "不同步": "不同步",
+    "宽高大小": "寬高大小",
+    "宽": "寬",
+    "高": "高",
+    "图片地址": "圖片網址",
+    "请输入图片地址": "請輸入圖片網址",
+    "选择": "選擇",
+    "图片缩放": "圖片縮放",
+    "等比": "等比",
+    "裁切": "裁切",
+    "填充": "填充",
+    "原始尺寸": "原始尺寸",
+    "颜色": "顏色",
+    "边框颜色": "邊框顏色",
+    "水印功能": "浮水印功能",
+    "水印内容": "浮水印內容",
+    "旋转角度": "旋轉角度",
+    "水平密度": "水平密度",
+    "垂直密度": "垂直密度",
+    "水印时间": "浮水印時間",
+    "时间格式": "時間格式",
+    "页码格式": "頁碼格式",
+    "显示页码": "顯示頁碼",
+    "页码续排": "頁碼續排",
+    "续排": "續排",
+    "重排": "重排",
+    "每行缩进": "每行縮排",
+    "显示规则": "顯示規則",
+    "始终隐藏": "始終隱藏",
+    "首页": "首頁",
+    "奇数页": "奇數頁",
+    "偶数页": "偶數頁",
+    "尾页": "尾頁",
+    "强制分页": "強制分頁",
+    "是": "是",
+    "否": "否",
+    "打印规则": "列印規則",
+    "保持奇数": "保持奇數",
+    "保持偶数": "保持偶數",
+    "分页规则": "分頁規則",
+    "不分页": "不分頁",
+    "移除段落左侧空白": "移除段落左側空白",
+    "移除": "移除",
+    "不移除": "不移除",
+    "首页页尾": "首頁頁尾",
+    "尾页页尾": "尾頁頁尾",
+    "偶数页页尾": "偶數頁頁尾",
+    "奇数页页尾": "奇數頁頁尾",
+    "位置固定": "位置固定",
+    "拖动方向": "拖動方向",
+    "横向": "橫向",
+    "竖向": "豎向",
+    "左偏移": "左偏移",
+    "偏移量": "偏移量",
+    "最低高度": "最低高度",
+    "文本过短或为空时的高度": "文本過短或為空時的高度",
+    "隐藏规则": "隱藏規則",
+    "表体行边框": "表體列邊框",
+    "元素层级": "元素層級",
+    "边框设置": "邊框設置",
+    "实线": "實線",
+    "虚线": "虛線",
+    "左内边距": "左內邊距",
+    "上内边距": "上內邊距",
+    "右内边距": "右內邊距",
+    "下内边距": "下內邊距",
+    "样式": "樣式",
+    "边框样式": "邊框樣式",
+    "长虚线": "長虛線",
+    "短虚线": "短虛線",
+    "背景颜色": "背景顏色",
+    "纸张方向(仅自定义纸质有效)": "紙張方向(僅自訂紙質有效)",
+    "纵向": "縱向",
+    "上下对齐": "上下對齊",
+    "垂直居中": "垂直置中",
+    "底部": "底部",
+    "文本换行": "文字換行",
+    "不换行": "不換行",
+    "不换行&隐藏": "不換行&隱藏",
+    "不换行&省略": "不換行&省略",
+    "打印类型": "列印類型",
+    "文本": "文字",
+    "二维码": "二維碼",
+    "字段类型": "欄位類型",
+    "默认(文本)": "預設(文字)",
+    "序号": "序號",
+    "图片": "圖片",
+    "单元格高度": "儲存格高度",
+    "条形码、二维码以及图片有效": "條碼、二維碼以及圖片有效",
+    "底部聚合标题": "底部彙總標題",
+    "底部聚合文本": "底部彙總文字",
+    "聚合类型": "彙總類型",
+    "底部聚合合并列数": "底部彙總合併列數",
+    "合并列数": "合併列數",
+    "底部聚合类型左右对齐": "底部彙總類型左右對齊",
+    "整数": "整數",
+    "保留%s位": "保留%s位",
+    "底部聚合小数": "底部彙總小數",
+    "底部聚合格式化函数": "底部彙總格式化函数",
+    "转大小写": "轉大小寫",
+    "底部聚合类型": "底部彙總類型",
+    "不聚合": "不彙總",
+    "仅文本": "僅文字",
+    "顶部偏移": "頂部偏移",
+    "一行多组": "一行多組",
+    "一行二列": "一行二欄",
+    "一行三列": "一行三欄",
+    "一行四列": "一行四欄",
+    "一行多组间隔": "一行多組間隔",
+    "表格头显示": "表格頭顯示",
+    "每页显示": "每頁顯示",
+    "首页显示": "首頁顯示",
+    "不显示": "不顯示",
+    "数据类型": "資料類型",
+    "日期时间": "日期時間",
+    "布尔": "布爾",
+    "格式": "格式",
+    "格式化函数": "格式化函數",
+    "样式函数": "樣式函數",
+    "行/列合并函数": "行/列合併函數",
+    "跨页合并是否清除": "跨頁合併是否清除",
+    "表格脚函数": "表格腳函數",
+    "分组字段函数": "分組欄位函數",
+    "分组头格式化函数": "分組頭格式化函數",
+    "分组头信息": "分組頭資訊",
+    "分组脚格式化函数": "分組腳格式化函數",
+    "分组脚信息": "分組腳資訊",
+    "多组表格脚函数": "多組表格腳函數",
+    "行样式函数": "行樣式函數",
+    "单元格左右对齐": "儲存格左右對齊",
+    "单元格上下对齐": "儲存格上下對齐",
+    "上": "上",
+    "中": "中",
+    "表格头单元格左右对齐": "表格頭儲存格左右對齐",
+    "单元格样式函数": "儲存格樣式函數",
+    "表格头样式函数": "表格頭樣式函數",
+    "单元格格式化函数": "儲存格格式化函數",
+    "单元格渲染函数": "儲存格渲染函數",
+    "自动补全": "自動完成",
+    "每页最大行数": "每頁最大行數",
+    "表格脚显示": "表格腳顯示",
+    "最后显示": "最後顯示",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "沒有足夠空間進行表格分頁,請調整頁眉/頁腳線",
+    "没有足够空间,显示下方内容, 可分页高度": "沒有足夠空間,顯示下方內容, 可分頁高度",
+    "列属性": "列屬性",
+    "在上方插入行": "在上方插入列",
+    "在下方插入行": "在下方插入列",
+    "向左方插入列": "向左方插入列",
+    "向右方插入列": "向右方插入列",
+    "删除行": "刪除列",
+    "删除列": "刪除列",
+    "对齐": "對齊",
+    "左": "左",
+    "左右居中": "左右置中",
+    "右": "右",
+    "下": "下",
+    "合并单元格": "合併儲存格",
+    "解开单元格": "解開儲存格",
+    "条形码生成失败": "條碼生成失敗",
+    "请检查 hiprint.init 的 provider 是否配置了": "請檢查 hiprint.init 的 provider 是否配置了",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "已移除'tableCustom',請替換使用'table'詳情見更新記錄",
+    "确定": "確定",
+    "删除": "刪除",
+    "连接客户端失败": "連接客戶端失敗",
+    "基础": "基礎",
+    "边框": "邊框",
+    "列": "列",
+    "高级": "高級",
+    "面板排列": "面板排列",
+    "排列方式": "排列方式",
+    "垂直间距%s": "垂直間距%s",
+    "水平间距%s": "水平間距%s",
+    "边框圆角": "邊框圓角"
+}

src/i18n/de.json

@@ -0,0 +1,249 @@
+{
+  "请选择字段": "Bitte Feld auswählen",
+  "计数": "Anzahl",
+  "合计": "Summe",
+  "平均值": "Durchschnitt",
+  "最小值": "Min",
+  "最大值": "Max",
+  "此格式不支持该文本": "Dieses Format unterstützt diesen Text nicht",
+  "二维码生成失败": "QR-Code Generierung fehlgeschlagen",
+  "字体行高": "Schriftzeilenhöhe",
+  "默认": "Standard",
+  "字体": "Schriftart",
+  "宋体": "SimSun",
+  "微软雅黑": "Microsoft YaHei",
+  "字体大小": "Schriftgröße",
+  "字体粗细": "Schriftstärke",
+  "更细": "Feiner",
+  "粗体": "Fett",
+  "粗体+": "Fetter",
+  "字间距": "Zeilenabstand",
+  "左右对齐": "Blocksatz",
+  "居左": "Linksbündig",
+  "居中": "Zentriert",
+  "居右": "Rechtsbündig",
+  "两端对齐": "Blocksatz",
+  "标题显示隐藏": "Titelanzeige",
+  "显示": "Anzeigen",
+  "隐藏": "Ausblenden",
+  "表格边框": "Tabellenrahmen",
+  "有边框": "Ja",
+  "无边框": "Nein",
+  "表头边框": "Kopfrahmen",
+  "左边框": "Links",
+  "右边框": "Rechts",
+  "左右边框": "Links & Rechts",
+  "上边框": "Oben",
+  "下边框": "Unten",
+  "上下边框": "Oben & Unten",
+  "表头单元格边框": "Kopfzel-lenrahmen",
+  "表尾边框": "Fußzeilenrahmen",
+  "表尾单元格边框": "Fußzellenrahmen",
+  "表头行高": "Kopfzeilenhöhe",
+  "表头字体大小": "Kopfschriftgröße",
+  "表头字体粗细": "Kopfschriftstärke",
+  "表体单元格边框": "Zellenrahmen",
+  "表体行高": "Zeilenhöhe",
+  "表头背景": "Kopfzeilen-hintergrund",
+  "线宽": "Linienbreite",
+  "边框大小": "Rahmenbreite",
+  "条形码格式": "Strichcodetyp",
+  "商品条码": "Waren-Strichcode",
+  "条形码": "Strichcode",
+  "物流": "Logistik",
+  "邮政和快递编码": "Post- und Kuriercode",
+  "医疗产品编码": "Medizinproduktcode",
+  "不常用编码": "Ungewöhnlicher Code",
+  "附加组件": "Zusätzliche Komponente",
+  "实验编码": "Experimenteller Code",
+  "条码类型": "Strichcodetyp",
+  "二维码类型": "QR-Code-Typ",
+  "二维码容错率": "QR-Code-Fehlerkorrektur",
+  "字体颜色": "Schriftfarbe",
+  "文本修饰": "Textdekoration",
+  "下划线": "Unterstrichen",
+  "上划线": "Überstrichen",
+  "穿梭线": "Durchgestrichen",
+  "字段名": "Feldname",
+  "请输入字段名": "Bitte Feldname eingeben",
+  "标题": "Titel",
+  "请输入标题": "Bitte Titel eingeben",
+  "测试数据": "Testdaten",
+  "仅字段名称存在时有效": "Nur gültig, wenn Feldnamen vorhanden",
+  "位置坐标": "Positionskoordinate",
+  "X位置(左)": "X-Position (links)",
+  "Y位置(上)": "Y-Position (oben)",
+  "同步": "Synchronisieren",
+  "不同步": "Nicht synchronisieren",
+  "宽高大小": "Breite & Höhe",
+  "宽": "Breite",
+  "高": "Höhe",
+  "图片地址": "Bild-URL",
+  "请输入图片地址": "Bitte Bild-URL eingeben",
+  "选择": "Auswählen",
+  "图片缩放": "Bildskalierung",
+  "等比": "Proportional",
+  "裁切": "Zuschneiden",
+  "填充": "Auffüllen",
+  "原始尺寸": "Originalgröße",
+  "颜色": "Farbe",
+  "边框颜色": "Rahmenfarbe",
+  "水印功能": "Wasserzeichen",
+  "水印内容": "Wasserzeicheninhalt",
+  "旋转角度": "Drehwinkel",
+  "水平密度": "Horizontale Dichte",
+  "垂直密度": "Vertikale Dichte",
+  "水印时间": "Wasserzeichenzeit",
+  "时间格式": "Zeitformat",
+  "页码格式": "Seitenzahlformat",
+  "显示页码": "Seitenzahl anzeigen",
+  "页码续排": "Seitenzahl fortsetzen",
+  "续排": "Fortsetzen",
+  "重排": "Zurücksetzen",
+  "每行缩进": "Einrückung",
+  "显示规则": "Anzeigeregel",
+  "始终隐藏": "Immer ausblenden",
+  "首页": "Erste Seite",
+  "奇数页": "Ungerade Seiten",
+  "偶数页": "Gerade Seiten",
+  "尾页": "Letzte Seite",
+  "强制分页": "Seitenumbruch erzwingen",
+  "是": "Ja",
+  "否": "Nein",
+  "打印规则": "Druckregel",
+  "保持奇数": "Ungerade beibehalten",
+  "保持偶数": "Gerade beibehalten",
+  "分页规则": "Seitenumbruchregel",
+  "不分页": "Kein Seitenumbruch",
+  "移除段落左侧空白": "Linken Freiraum entfernen",
+  "移除": "Entfernen",
+  "不移除": "Nicht entfernen",
+  "首页页尾": "Fußzeile erste Seite",
+  "尾页页尾": "Fußzeile letzte Seite",
+  "偶数页页尾": "Fußzeile gerade Seiten",
+  "奇数页页尾": "Fußzeile ungerade Seiten",
+  "位置固定": "Feste Position",
+  "拖动方向": "Zugrichtung",
+  "横向": "Horizontal",
+  "竖向": "Vertikal",
+  "左偏移": "Linker Versatz",
+  "偏移量": "Versatz",
+  "最低高度": "Mindesthöhe",
+  "文本过短或为空时的高度": "Höhe bei zu kurzem oder leerem Text",
+  "隐藏规则": "Ausblendregel",
+  "表体行边框": "Zeilenrahmen",
+  "元素层级": "Z-Index",
+  "边框设置": "Rahmeneinstellungen",
+  "实线": "Durchgezogen",
+  "虚线": "Gestrichelt",
+  "左内边距": "Linker Abstand",
+  "上内边距": "Oberer Abstand",
+  "右内边距": "Rechter Abstand",
+  "下内边距": "Unterer Abstand",
+  "样式": "Stil",
+  "边框样式": "Rahmenstil",
+  "长虚线": "Lang gestrichelt",
+  "短虚线": "Kurz gestrichelt",
+  "背景颜色": "Hintergrundfarbe",
+  "纸张方向(仅自定义纸质有效)": "Papierausrichtung (nur benutzerdefiniertes Papier)",
+  "纵向": "Hochformat",
+  "上下对齐": "Vertikale Ausrichtung",
+  "垂直居中": "Vertikal zentriert",
+  "底部": "Unten",
+  "文本换行": "Textumbruch",
+  "不换行": "Kein Umbruch",
+  "不换行&隐藏": "Kein Umbruch & ausbl.",
+  "不换行&省略": "Kein Umbruch & Ausl.",
+  "打印类型": "Drucktyp",
+  "文本": "Text",
+  "二维码": "QR-Code",
+  "字段类型": "Feldtyp",
+  "默认(文本)": "Standard (Text)",
+  "序号": "Index",
+  "图片": "Bild",
+  "单元格高度": "Zellenhöhe",
+  "条形码、二维码以及图片有效": "Strichcode, QR-Code und Bild gültig",
+  "底部聚合标题": "Zusammenfassungstitel",
+  "底部聚合文本": "Zusammenfassungstext",
+  "聚合类型": "Zusammenfassungstyp",
+  "底部聚合合并列数": "Zusammenfassungsspalten",
+  "合并列数": "Spalten verbinden",
+  "底部聚合类型左右对齐": "Zusammenfassungsausrichtung",
+  "整数": "Ganzzahl",
+  "保留%s位": "Behalte %s Dezimalstellen",
+  "底部聚合小数": "Zusammenfassungsdezimalstellen",
+  "转大小写": "Groß-/Kleinschreibung",
+  "底部聚合类型": "Zusammenfassungstyp",
+  "不聚合": "Keine Zusammenfassung",
+  "仅文本": "Nur Text",
+  "顶部偏移": "oberer Versatz",
+  "一行多组": "Mehrere Gruppen pro Zeile",
+  "一行二列": "Eine Zeile zwei Spalten",
+  "一行三列": "Eine Zeile drei Spalten",
+  "一行四列": "Eine Zeile vier Spalten",
+  "一行多组间隔": "Abstand mehrerer Gruppen pro Zeile",
+  "表格头显示": "Tabellenkopf Anzeige",
+  "每页显示": "Pro Seite anzeigen",
+  "首页显示": "Auf erster Seite anzeigen",
+  "不显示": "Nicht anzeigen",
+  "数据类型": "Datentyp",
+  "日期时间": "DatumUhrzeit",
+  "布尔": "Boolesch",
+  "格式": "Format",
+  "格式化函数": "Formatierungsfunktion",
+  "样式函数": "Style-Funktion",
+  "行/列合并函数": "Zeile/Spalte zusammenführen",
+  "跨页合并是否清除": "Seitenumbruch aufheben",
+  "表格脚函数": "Tabellenfußfunktion",
+  "分组字段函数": "Gruppenfeld-Funktion",
+  "分组头格式化函数": "Gruppenkopf-Formatierungsfunktion",
+  "分组头信息": "Gruppenkopfinfo",
+  "分组脚格式化函数": "Gruppenfuß-Formatierungsfunktion",
+  "分组脚信息": "Gruppenfußinfo",
+  "多组表格脚函数": "Mehrere Gruppen Tabellenfußfunktion",
+  "行样式函数": "Zeilenstilfunktion",
+  "单元格左右对齐": "Zellenausrichtung",
+  "单元格上下对齐": "Zellenvertikale Ausrichtung",
+  "上": "Oben",
+  "中": "Mitte",
+  "表格头单元格左右对齐": "Tabellenkopf Ausrichtung",
+  "单元格样式函数": "Zellenstilfunktion",
+  "表格头样式函数": "Tabellenkopf-Stilfunktion",
+  "单元格格式化函数": "Zellenformatierungsfunktion",
+  "单元格渲染函数": "Zellen-Rendering-Funktion",
+  "自动补全": "Auto Vervollständigen",
+  "每页最大行数": "Max Zeilen pro Seite",
+  "表格脚显示": "Tabellenfußanzeige",
+  "最后显示": "Auf letzter Seite anzeigen",
+  "没有足够空间进行表格分页，请调整页眉/页脚线": "Nicht genügend Platz für die Tabellenseitenumbrüche, bitte Kopf-/Fußzeile anpassen",
+  "没有足够空间,显示下方内容, 可分页高度": "Nicht genügend Platz, Inhalt unten anzeigen, Höhe kann umgebrochen werden:",
+  "列属性": "Spalteneigenschaft",
+  "在上方插入行": "Zeile oben einfügen",
+  "在下方插入行": "Zeile unten einfügen",
+  "向左方插入列": "Spalte links einfügen",
+  "向右方插入列": "Spalte rechts einfügen",
+  "删除行": "Zeile löschen",
+  "删除列": "Spalte löschen",
+  "对齐": "Ausrichtung",
+  "左": "Links",
+  "左右居中": "Zentriert",
+  "右": "Rechts",
+  "下": "Unten",
+  "合并单元格": "Zelle verbinden",
+  "解开单元格": "Zellenverbindung aufheben",
+  "条形码生成失败": "Strichcode-Generierung fehlgeschlagen",
+  "请检查 hiprint.init 的 provider 是否配置了": "Bitte überprüfen, ob der Anbieter von hiprint.init konfiguriert wurde",
+  "已移除'tableCustom',请替换使用'table'详情见更新记录": "'TableCustom' wurde entfernt, bitte durch 'table' ersetzen, Details siehe Änderungsprotokoll",
+  "确定": "Bestätigen",
+  "删除": "Löschen",
+  "连接客户端失败": "Verbindung zum Client fehlgeschlagen",
+  "基础": "Grundlegend",
+  "边框": "Rahmen",
+  "列": "Spalte",
+  "高级": "Erweitert",
+  "面板排列": "Panelanordnung",
+  "排列方式": "Anordnungsart",
+  "垂直间距%s": "Vertikaler Abstand %s",
+  "水平间距%s": "Horizontaler Abstand %s",
+  "边框圆角": "Abgerundete Ecken"
+}

src/i18n/en.json

@@ -0,0 +1,250 @@
+{
+  "请选择字段": "Please select field",
+  "计数": "Count",
+  "合计": "Sum",
+  "平均值": "Average",
+  "最小值": "Min",
+  "最大值": "Max",
+  "此格式不支持该文本": "This format does not support this text",
+  "二维码生成失败": "QR code generation failed",
+  "字体行高": "Font Height",
+  "默认": "Default",
+  "字体": "Font",
+  "宋体": "SimSun",
+  "微软雅黑": "Microsoft YaHei",
+  "字体大小": "Font Size",
+  "字体粗细": "Font Weight",
+  "更细": "Lighter",
+  "粗体": "Bold",
+  "粗体+": "Bolder",
+  "字间距": "Letter Spacing",
+  "左右对齐": "Justified",
+  "居左": "Left",
+  "居中": "Center",
+  "居右": "Right",
+  "两端对齐": "Justified",
+  "标题显示隐藏": "Title Display",
+  "显示": "Show",
+  "隐藏": "Hide",
+  "表格边框": "Table Border",
+  "有边框": "Yes",
+  "无边框": "No",
+  "表头边框": "Header Border",
+  "左边框": "Left",
+  "右边框": "Right",
+  "左右边框": "Left & Right",
+  "上边框": "Top",
+  "下边框": "Bottom",
+  "上下边框": "Top & Bottom",
+  "表头单元格边框": "Header Cell Border",
+  "表尾边框": "Footer Border",
+  "表尾单元格边框": "Footer Cell Border",
+  "表头行高": "Header Row Height",
+  "表头字体大小": "Header Font Size",
+  "表头字体粗细": "Header Font Weight",
+  "表体单元格边框": "Body Cell Border",
+  "表体行高": "Body Row Height",
+  "表头背景": "Header Background",
+  "线宽": "Line Width",
+  "边框大小": "Border Size",
+  "条形码格式": "Barcode Type",
+  "商品条码": "Goods Barcode",
+  "条形码": "Barcode",
+  "物流": "Logistics",
+  "邮政和快递编码": "Postal and Courier Code",
+  "医疗产品编码": "Medical Product Code",
+  "不常用编码": "Uncommon Code",
+  "附加组件": "Additional Component",
+  "实验编码": "Experimental Code",
+  "条码类型": "Barcode Type",
+  "二维码类型": "QRCode Type",
+  "二维码容错率": "QRCode ErrorCorrectionLevel",
+  "字体颜色": "Font Color",
+  "文本修饰": "Text Decoration",
+  "下划线": "Underline",
+  "上划线": "Overline",
+  "穿梭线": "Line Through",
+  "字段名": "Field",
+  "请输入字段名": "Please enter field",
+  "标题": "Title",
+  "请输入标题": "Please enter title",
+  "测试数据": "Test Data",
+  "仅字段名称存在时有效": "Only valid when field name exists",
+  "位置坐标": "Position Coordinate",
+  "X位置(左)": "X Position(Left)",
+  "Y位置(上)": "Y Position(Top)",
+  "同步": "Sync",
+  "不同步": "Unsync",
+  "宽高大小": "Width & Height",
+  "宽": "Width",
+  "高": "Height",
+  "图片地址": "Image URL",
+  "请输入图片地址": "Please enter image URL",
+  "选择": "Choose",
+  "图片缩放": "Image Scale",
+  "等比": "Proportional",
+  "裁切": "Crop",
+  "填充": "Fill",
+  "原始尺寸": "Original Size",
+  "颜色": "Color",
+  "边框颜色": "Border Color",
+  "水印功能": "Watermark",
+  "水印内容": "Watermark Content",
+  "旋转角度": "Rotate Angle",
+  "水平密度": "Horizontal Density",
+  "垂直密度": "Vertical Density",
+  "水印时间": "Watermark Time",
+  "时间格式": "Time Format",
+  "页码格式": "Page Number Format",
+  "显示页码": "Show Page Number",
+  "页码续排": "Page Number Continue",
+  "续排": "Continue",
+  "重排": "Reset",
+  "每行缩进": "Indent",
+  "显示规则": "Display Rule",
+  "始终隐藏": "Always Hide",
+  "首页": "First Page",
+  "奇数页": "Odd Page",
+  "偶数页": "Even Page",
+  "尾页": "Last Page",
+  "强制分页": "Force Page Break",
+  "是": "Yes",
+  "否": "No",
+  "打印规则": "Print Rule",
+  "保持奇数": "Keep Odd",
+  "保持偶数": "Keep Even",
+  "分页规则": "Page Break Rule",
+  "不分页": "No Page Break",
+  "移除段落左侧空白": "Remove Left Blank",
+  "移除": "Remove",
+  "不移除": "No Remove",
+  "首页页尾": "First Page",
+  "尾页页尾": "Last Page",
+  "偶数页页尾": "Even Page",
+  "奇数页页尾": "Odd Page",
+  "位置固定": "Fixed Position",
+  "拖动方向": "Drag Direction",
+  "横向": "Horizontal",
+  "竖向": "Vertical",
+  "左偏移": "Left Offset",
+  "偏移量": "Offset",
+  "最低高度": "Min Height",
+  "文本过短或为空时的高度": "Height when text is too short or empty",
+  "隐藏规则": "Hide Rule",
+  "表体行边框": "Body Row Border",
+  "元素层级": "Zindex",
+  "边框设置": "Border Setting",
+  "实线": "Solid",
+  "虚线": "Dashed",
+  "左内边距": "Left Padding",
+  "上内边距": "Top Padding",
+  "右内边距": "Right Padding",
+  "下内边距": "Bottom Padding",
+  "样式": "Style",
+  "边框样式": "Border Style",
+  "长虚线": "Long Dashed",
+  "短虚线": "Short Dashed",
+  "背景颜色": "Background Color",
+  "纸张方向(仅自定义纸质有效)": "Paper Orientation (Only Custom Paper)",
+  "纵向": "Portrait",
+  "上下对齐": "Vertical Align",
+  "垂直居中": "Middle",
+  "底部": "Bottom",
+  "文本换行": "Text Wrap",
+  "不换行": "No Wrap",
+  "不换行&隐藏": "No Wrap & Hide",
+  "不换行&省略": "No Wrap & Ellipsis",
+  "打印类型": "Print Type",
+  "文本": "Text",
+  "二维码": "QRCode",
+  "字段类型": "Field Type",
+  "默认(文本)": "Default(Text)",
+  "序号": "Index",
+  "图片": "Image",
+  "单元格高度": "Cell Height",
+  "条形码、二维码以及图片有效": "Barcode, QRCode and Image are valid",
+  "底部聚合标题": "Summary Title",
+  "底部聚合文本": "Summary Text",
+  "聚合类型": "Summary Type",
+  "底部聚合合并列数": "Summary Colspan",
+  "合并列数": "Colspan",
+  "底部聚合类型左右对齐": "Summary Align",
+  "整数": "Integer",
+  "保留%s位": "Keep %s Decimal",
+  "底部聚合小数": "Summary Decimal",
+  "底部聚合格式化函数": "Summary Format Function",
+  "转大小写": "UpperCase or LowerCase",
+  "底部聚合类型": "Summary Type",
+  "不聚合": "No Summary",
+  "仅文本": "Text Only",
+  "顶部偏移": "Top Offset",
+  "一行多组": "Multi Group",
+  "一行二列": "One Line Two Column",
+  "一行三列": "One Line Three Column",
+  "一行四列": "One Line Four Column",
+  "一行多组间隔": "Multi Group Spacing",
+  "表格头显示": "Table Header Display",
+  "每页显示": "Display Per Page",
+  "首页显示": "Display On First Page",
+  "不显示": "No Display",
+  "数据类型": "Data Type",
+  "日期时间": "DateTime",
+  "布尔": "Boolean",
+  "格式": "Format",
+  "格式化函数": "Format Function",
+  "样式函数": "Style Function",
+  "行/列合并函数": "Row/Column Merge Function",
+  "跨页合并是否清除": "Clear Page Break Merge",
+  "表格脚函数": "Table Footer Function",
+  "分组字段函数": "Group Field Function",
+  "分组头格式化函数": "Group Header Format Function",
+  "分组头信息": "Group Header Info",
+  "分组脚格式化函数": "Group Footer Format Function",
+  "分组脚信息": "Group Footer Info",
+  "多组表格脚函数": "Multi Group Table Footer Function",
+  "行样式函数": "Row Style Function",
+  "单元格左右对齐": "Cell Align",
+  "单元格上下对齐": "Cell Vertical Align",
+  "上": "Top",
+  "中": "Middle",
+  "表格头单元格左右对齐": "Header Cell Align",
+  "单元格样式函数": "Cell Style Function",
+  "表格头样式函数": "Header Style Function",
+  "单元格格式化函数": "Cell Format Function",
+  "单元格渲染函数": "Cell Render Function",
+  "自动补全": "Auto Complete",
+  "每页最大行数": "Max Rows Per Page",
+  "表格脚显示": "Table Footer Display",
+  "最后显示": "Display On Last Page",
+  "没有足够空间进行表格分页，请调整页眉/页脚线": "There is not enough space for table pagination, please adjust the header/footer line",
+  "没有足够空间,显示下方内容, 可分页高度": "Not enough space, display the content below, the height can be paginated:",
+  "列属性": "Column Property",
+  "在上方插入行": "Insert Row Above",
+  "在下方插入行": "Insert Row Below",
+  "向左方插入列": "Insert Column Left",
+  "向右方插入列": "Insert Column Right",
+  "删除行": "Delete Row",
+  "删除列": "Delete Column",
+  "对齐": "Align",
+  "左": "Left",
+  "左右居中": "Center",
+  "右": "Right",
+  "下": "Bottom",
+  "合并单元格": "Merge Cell",
+  "解开单元格": "Unmerge Cell",
+  "条形码生成失败": "Barcode generation failed",
+  "请检查 hiprint.init 的 provider 是否配置了": "Please check if the provider of hiprint.init is configured",
+  "已移除'tableCustom',请替换使用'table'详情见更新记录": "The 'tableCustom' has been removed, please replace it with 'table', see the update log for details",
+  "确定": "Confirm",
+  "删除": "Delete",
+  "连接客户端失败": "Failed to connect to the client",
+  "基础": "Basic",
+  "边框": "Border",
+  "列": "Column",
+  "高级": "Advanced",
+  "面板排列": "Panel Arrangement",
+  "排列方式": "Arrangement Method",
+  "垂直间距%s": "Vertical Spacing %s",
+  "水平间距%s": "Horizontal Spacing %s",
+  "边框圆角": "Border Radius"
+}

src/i18n/es.json

@@ -0,0 +1,249 @@
+{
+    "请选择字段": "Por favor, selecciona un campo",
+    "计数": "Recuento",
+    "合计": "Suma",
+    "平均值": "Promedio",
+    "最小值": "Mínimo",
+    "最大值": "Máximo",
+    "此格式不支持该文本": "Este formato no es compatible con este texto",
+    "二维码生成失败": "Error al generar código QR",
+    "字体行高": "Altura de fuente",
+    "默认": "Predeterminado",
+    "字体": "Fuente",
+    "宋体": "SimSun",
+    "微软雅黑": "Microsoft YaHei",
+    "字体大小": "Tamaño de fuente",
+    "字体粗细": "Grosor de fuente",
+    "更细": "Más fino",
+    "粗体": "Negrita",
+    "粗体+": "Más negrita",
+    "字间距": "Espacio entre letras",
+    "左右对齐": "Justificado",
+    "居左": "Izquierda",
+    "居中": "Centrado",
+    "居右": "Derecha",
+    "两端对齐": "Justificado",
+    "标题显示隐藏": "Visualización de título",
+    "显示": "Mostrar",
+    "隐藏": "Ocultar",
+    "表格边框": "Borde de tabla",
+    "有边框": "Sí",
+    "无边框": "No",
+    "表头边框": "Borde de encabezado",
+    "左边框": "Izquierda",
+    "右边框": "Derecha",
+    "左右边框": "Izquierda y derecha",
+    "上边框": "Superior",
+    "下边框": "Inferior",
+    "上下边框": "Superior e inferior",
+    "表头单元格边框": "Borde de celda de encabezado",
+    "表尾边框": "Borde de pie de página",
+    "表尾单元格边框": "Borde de celda de pie de página",
+    "表头行高": "Altura de fila de encabezado",
+    "表头字体大小": "Tamaño de fuente de encabezado",
+    "表头字体粗细": "Grosor de fuente de encabezado",
+    "表体单元格边框": "Borde de celda de cuerpo",
+    "表体行高": "Altura de fila de cuerpo",
+    "表头背景": "Fondo de encabezado",
+    "线宽": "Ancho de línea",
+    "边框大小": "Tamaño de borde",
+    "条形码格式": "Tipo de código de barras",
+    "商品条码": "Código de barras de producto",
+    "条形码": "Código de barras",
+    "物流": "Logística",
+    "邮政和快递编码": "Código postal y de mensajería",
+    "医疗产品编码": "Código de producto médico",
+    "不常用编码": "Código inusual",
+    "附加组件": "Componente adicional",
+    "实验编码": "Código experimental",
+    "条码类型": "Tipo de código de barras",
+    "二维码类型": "Tipo de código QR",
+    "二维码容错率": "Nivel de corrección de errores de código QR",
+    "字体颜色": "Color de fuente",
+    "文本修饰": "Decoración de texto",
+    "下划线": "Subrayado",
+    "上划线": "Tachado",
+    "穿梭线": "Tachado",
+    "字段名": "Nombre de campo",
+    "请输入字段名": "Introduce el nombre del campo",
+    "标题": "Título",
+    "请输入标题": "Introduce el título",
+    "测试数据": "Datos de prueba",
+    "仅字段名称存在时有效": "Válido solo cuando existe el nombre de campo",
+    "位置坐标": "Coordenada de posición",
+    "X位置(左)": "Posición X (izquierda)",
+    "Y位置(上)": "Posición Y (superior)",
+    "同步": "Sincronizar",
+    "不同步": "No sincronizar",
+    "宽高大小": "Ancho y alto",
+    "宽": "Ancho",
+    "高": "Alto",
+    "图片地址": "URL de imagen",
+    "请输入图片地址": "Introduce la URL de la imagen",
+    "选择": "Elegir",
+    "图片缩放": "Escala de imagen",
+    "等比": "Proporcional",
+    "裁切": "Recortar",
+    "填充": "Rellenar",
+    "原始尺寸": "Tamaño original",
+    "颜色": "Color",
+    "边框颜色": "Color de borde",
+    "水印功能": "Marca de agua",
+    "水印内容": "Contenido de la marca de agua",
+    "旋转角度": "Ángulo de rotación",
+    "水平密度": "Densidad horizontal",
+    "垂直密度": "Densidad vertical",
+    "水印时间": "Hora de la marca de agua",
+    "时间格式": "Formato de hora",
+    "页码格式": "Formato del número de página",
+    "显示页码": "Mostrar número de página",
+    "页码续排": "Continuar con el número de página",
+    "续排": "Continuar",
+    "重排": "Reiniciar",
+    "每行缩进": "Sangría",
+    "显示规则": "Regla de visualización",
+    "始终隐藏": "Ocultar siempre",
+    "首页": "Primera página",
+    "奇数页": "Páginas impares",
+    "偶数页": "Páginas pares",
+    "尾页": "Última página",
+    "强制分页": "Forzar salto de página",
+    "是": "Sí",
+    "否": "No",
+    "打印规则": "Regla de impresión",
+    "保持奇数": "Mantener impares",
+    "保持偶数": "Mantener pares",
+    "分页规则": "Regla de salto de página",
+    "不分页": "Sin salto de página",
+    "移除段落左侧空白": "Eliminar espacio en blanco izquierdo",
+    "移除": "Eliminar",
+    "不移除": "No eliminar",
+    "首页页尾": "Pie de página de primera página",
+    "尾页页尾": "Pie de página de última página",
+    "偶数页页尾": "Pie de página en páginas pares",
+    "奇数页页尾": "Pie de página en páginas impares",
+    "位置固定": "Posición fija",
+    "拖动方向": "Dirección de arrastre",
+    "横向": "Horizontal",
+    "竖向": "Vertical",
+    "左偏移": "Desplazamiento izquierdo",
+    "偏移量": "Desplazamiento",
+    "最低高度": "Altura mínima",
+    "文本过短或为空时的高度": "Altura cuando el texto es demasiado corto o está vacío",
+    "隐藏规则": "Regla para ocultar",
+    "表体行边框": "Borde de fila de cuerpo",
+    "元素层级": "Índice Z",
+    "边框设置": "Ajustes de borde",
+    "实线": "Sólido",
+    "虚线": "Discontinuo",
+    "左内边距": "Relleno izquierdo",
+    "上内边距": "Relleno superior",
+    "右内边距": "Relleno derecho",
+    "下内边距": "Relleno inferior",
+    "样式": "Estilo",
+    "边框样式": "Estilo de borde",
+    "长虚线": "Discontinuo largo",
+    "短虚线": "Discontinuo corto",
+    "背景颜色": "Color de fondo",
+    "纸张方向(仅自定义纸质有效)": "Orientación del papel (solo papel personalizado)",
+    "纵向": "Vertical",
+    "上下对齐": "Alineación vertical",
+    "垂直居中": "Centrado vertical",
+    "底部": "Inferior",
+    "文本换行": "Ajuste de texto",
+    "不换行": "Sin ajuste",
+    "不换行&隐藏": "Sin ajuste y ocultar",
+    "不换行&省略": "Sin ajuste y puntos suspensivos",
+    "打印类型": "Tipo de impresión",
+    "文本": "Texto",
+    "二维码": "Código QR",
+    "字段类型": "Tipo de campo",
+    "默认(文本)": "Predeterminado (texto)",
+    "序号": "Índice",
+    "图片": "Imagen",
+    "单元格高度": "Altura de celda",
+    "条形码、二维码以及图片有效": "Código de barras, código QR e imagen son válidos",
+    "底部聚合标题": "Título de resumen",
+    "底部聚合文本": "Texto de resumen",
+    "聚合类型": "Tipo de resumen",
+    "底部聚合合并列数": "Columnas combinadas de resumen",
+    "合并列数": "Columnas combinadas",
+    "底部聚合类型左右对齐": "Alineación de resumen",
+    "整数": "Entero",
+    "保留%s位": "Mantener %s decimales",
+    "底部聚合小数": "Decimales en resumen",
+    "转大小写": "Mayúsculas o minúsculas",
+    "底部聚合类型": "Tipo de resumen",
+    "不聚合": "Sin resumen",
+    "仅文本": "Solo texto",
+    "顶部偏移": "Desplazamiento superior",
+    "一行多组": "Varios grupos en una línea",
+    "一行二列": "Una línea dos columnas",
+    "一行三列": "Una línea tres columnas",
+    "一行四列": "Una línea cuatro columnas",
+    "一行多组间隔": "Espaciado de varios grupos en una línea",
+    "表格头显示": "Visualización de encabezado de tabla",
+    "每页显示": "Mostrar por página",
+    "首页显示": "Mostrar en primera página",
+    "不显示": "No mostrar",
+    "数据类型": "Tipo de dato",
+    "日期时间": "Fecha y hora",
+    "布尔": "Booleano",
+    "格式": "Formato",
+    "格式化函数": "Función de formato",
+    "样式函数": "Función de estilo",
+    "行/列合并函数": "Función combinar fila/columna",
+    "跨页合并是否清除": "¿Borrar combinación entre páginas?",
+    "表格脚函数": "Función de pie de tabla",
+    "分组字段函数": "Función de campo de agrupación",
+    "分组头格式化函数": "Función de formato de encabezado de grupo",
+    "分组头信息": "Información de encabezado de grupo",
+    "分组脚格式化函数": "Función de formato de pie de grupo",
+    "分组脚信息": "Información de pie de grupo",
+    "多组表格脚函数": "Función de pie de tabla de varios grupos",
+    "行样式函数": "Función de estilo de fila",
+    "单元格左右对齐": "Alineación de celda",
+    "单元格上下对齐": "Alineación vertical de celda",
+    "上": "Superior",
+    "中": "Centro",
+    "表格头单元格左右对齐": "Alineación de celda de encabezado",
+    "单元格样式函数": "Función de estilo de celda",
+    "表格头样式函数": "Función de estilo de encabezado",
+    "单元格格式化函数": "Función de formato de celda",
+    "单元格渲染函数": "Función de representación de celda",
+    "自动补全": "Autocompletar",
+    "每页最大行数": "Filas máximo por página",
+    "表格脚显示": "Visualización de pie de tabla",
+    "最后显示": "Mostrar en última página",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "No hay suficiente espacio para la paginación de tablas, ajuste la línea de encabezado/pie de página",
+    "没有足够空间,显示下方内容, 可分页高度": "No hay suficiente espacio, muestre el contenido a continuación, se puede paginar la altura:",
+    "列属性": "Propiedad de columna",
+    "在上方插入行": "Insertar fila encima",
+    "在下方插入行": "Insertar fila debajo",
+    "向左方插入列": "Insertar columna a la izquierda",
+    "向右方插入列": "Insertar columna a la derecha",
+    "删除行": "Eliminar fila",
+    "删除列": "Eliminar columna",
+    "对齐": "Alinear",
+    "左": "Izquierda",
+    "左右居中": "Centrar",
+    "右": "Derecha",
+    "下": "Inferior",
+    "合并单元格": "Combinar celda",
+    "解开单元格": "Descombinar celda",
+    "条形码生成失败": "Error al generar código de barras",
+    "请检查 hiprint.init 的 provider 是否配置了": "Verifique si se ha configurado el proveedor de hiprint.init",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "Se ha eliminado 'tableCustom', reemplácelo por 'table', consulte el registro de actualización para obtener detalles",
+    "确定": "Confirmar",
+    "删除": "Eliminar",
+    "连接客户端失败": "Error al conectarse al cliente",
+    "基础": "Básico",
+    "边框": "Borde",
+    "列": "Columna",
+    "高级": "Avanzado",
+    "面板排列": "Disposición del panel",
+    "排列方式": "Método de disposición",
+    "垂直间距%s": "Espaciado Vertical %s",
+    "水平间距%s": "Espaciado Horizontal %s",
+    "边框圆角": "Radio de Borde"
+}

src/i18n/fr.json

@@ -0,0 +1,249 @@
+{
+    "请选择字段": "Veuillez sélectionner un champ",
+    "计数": "Compter",
+    "合计": "Somme",
+    "平均值": "Moyenne",
+    "最小值": "Minimum",
+    "最大值": "Maximum",
+    "此格式不支持该文本": "Ce format ne prend pas en charge ce texte",
+    "二维码生成失败": "Échec de la génération de code QR",
+    "字体行高": "Hauteur de police",
+    "默认": "Défaut",
+    "字体": "Police",
+    "宋体": "SimSun",
+    "微软雅黑": "Microsoft YaHei",
+    "字体大小": "Taille de police",
+    "字体粗细": "Épaisseur de police",
+    "更细": "Plus léger",
+    "粗体": "Gras",
+    "粗体+": "Plus gras",
+    "字间距": "Espacement des lettres",
+    "左右对齐": "Justifié",
+    "居左": "Gauche",
+    "居中": "Centré",
+    "居右": "Droite",
+    "两端对齐": "Justifié",
+    "标题显示隐藏": "Affichage du titre",
+    "显示": "Afficher",
+    "隐藏": "Masquer",
+    "表格边框": "Bordure du tableau",
+    "有边框": "Oui",
+    "无边框": "Non",
+    "表头边框": "Bordure d'en-tête",
+    "左边框": "Gauche",
+    "右边框": "Droite",
+    "左右边框": "Gauche et droite",
+    "上边框": "Haut",
+    "下边框": "Bas",
+    "上下边框": "Haut et bas",
+    "表头单元格边框": "Bordure de cellule d'en-tête",
+    "表尾边框": "Bordure de pied de page",
+    "表尾单元格边框": "Bordure de cellule de pied de page",
+    "表头行高": "Hauteur de ligne d'en-tête",
+    "表头字体大小": "Taille de police d'en-tête",
+    "表头字体粗细": "Épaisseur de police d'en-tête",
+    "表体单元格边框": "Bordure de cellule de corps",
+    "表体行高": "Hauteur de ligne de corps",
+    "表头背景": "Arrière-plan de l'en-tête",
+    "线宽": "Largeur de trait",
+    "边框大小": "Taille de bordure",
+    "条形码格式": "Type de code à barres",
+    "商品条码": "Code à barres de produit",
+    "条形码": "Code à barres",
+    "物流": "Logistique",
+    "邮政和快递编码": "Code postal et messagerie",
+    "医疗产品编码": "Code de produit médical",
+    "不常用编码": "Code inhabituel",
+    "附加组件": "Composant supplémentaire",
+    "实验编码": "Code expérimental",
+    "条码类型": "Type de code à barres",
+    "二维码类型": "Type de QR code",
+    "二维码容错率": "Niveau de correction d'erreur de QR code",
+    "字体颜色": "Couleur de police",
+    "文本修饰": "Décoration de texte",
+    "下划线": "Souligné",
+    "上划线": "Barré",
+    "穿梭线": "Barré",
+    "字段名": "Nom de champ",
+    "请输入字段名": "Veuillez saisir le nom du champ",
+    "标题": "Titre",
+    "请输入标题": "Veuillez saisir le titre",
+    "测试数据": "Données de test",
+    "仅字段名称存在时有效": "Valide uniquement lorsque le nom de champ existe",
+    "位置坐标": "Coordonnée de position",
+    "X位置(左)": "Position X (gauche)",
+    "Y位置(上)": "Position Y (haut)",
+    "同步": "Synchroniser",
+    "不同步": "Non synchronisé",
+    "宽高大小": "Largeur et hauteur",
+    "宽": "Largeur",
+    "高": "Hauteur",
+    "图片地址": "URL de l'image",
+    "请输入图片地址": "Veuillez saisir l'URL de l'image",
+    "选择": "Choisir",
+    "图片缩放": "Mise à l'échelle de l'image",
+    "等比": "Proportionnel",
+    "裁切": "Rogner",
+    "填充": "Remplir",
+    "原始尺寸": "Taille d'origine",
+    "颜色": "Couleur",
+    "边框颜色": "Couleur de bordure",
+    "水印功能": "Filigrane",
+    "水印内容": "Contenu du filigrane",
+    "旋转角度": "Angle de rotation",
+    "水平密度": "Densité horizontale",
+    "垂直密度": "Densité verticale",
+    "水印时间": "Heure du filigrane",
+    "时间格式": "Format de l'heure",
+    "页码格式": "Format du numéro de page",
+    "显示页码": "Afficher le numéro de page",
+    "页码续排": "Continuer le numéro de page",
+    "续排": "Continuer",
+    "重排": "Réinitialiser",
+    "每行缩进": "Retrait",
+    "显示规则": "Règle d'affichage",
+    "始终隐藏": "Toujours masquer",
+    "首页": "Première page",
+    "奇数页": "Pages impaires",
+    "偶数页": "Pages paires",
+    "尾页": "Dernière page",
+    "强制分页": "Forcer saut de page",
+    "是": "Oui",
+    "否": "Non",
+    "打印规则": "Règle d'impression",
+    "保持奇数": "Garder impaires",
+    "保持偶数": "Garder paires",
+    "分页规则": "Règle de saut de page",
+    "不分页": "Pas de saut de page",
+    "移除段落左侧空白": "Supprimer l'espace vide à gauche",
+    "移除": "Supprimer",
+    "不移除": "Ne pas supprimer",
+    "首页页尾": "Pied de page première page",
+    "尾页页尾": "Pied de page dernière page",
+    "偶数页页尾": "Pied de page pages paires",
+    "奇数页页尾": "Pied de page pages impaires",
+    "位置固定": "Position fixe",
+    "拖动方向": "Direction de glissement",
+    "横向": "Horizontal",
+    "竖向": "Vertical",
+    "左偏移": "Décalage à gauche",
+    "偏移量": "Décalage",
+    "最低高度": "Hauteur minimum",
+    "文本过短或为空时的高度": "Hauteur lorsque le texte est trop court ou vide",
+    "隐藏规则": "Règle de masquage",
+    "表体行边框": "Bordure de ligne du corps",
+    "元素层级": "Index Z",
+    "边框设置": "Paramètres de bordure",
+    "实线": "Plein",
+    "虚线": "Pointillé",
+    "左内边距": "Marge intérieure gauche",
+    "上内边距": "Marge intérieure haut",
+    "右内边距": "Marge intérieure droite",
+    "下内边距": "Marge intérieure bas",
+    "样式": "Style",
+    "边框样式": "Style de bordure",
+    "长虚线": "Pointillé long",
+    "短虚线": "Pointillé court",
+    "背景颜色": "Couleur de fond",
+    "纸张方向(仅自定义纸质有效)": "Orientation du papier (uniquement papier personnalisé)",
+    "纵向": "Portrait",
+    "上下对齐": "Alignement vertical",
+    "垂直居中": "Centré verticalement",
+    "底部": "Bas",
+    "文本换行": "Césure de texte",
+    "不换行": "Pas de césure",
+    "不换行&隐藏": "Pas de césure et masquer",
+    "不换行&省略": "Pas de césure et points de suspension",
+    "打印类型": "Type d'impression",
+    "文本": "Texte",
+    "二维码": "QR code",
+    "字段类型": "Type de champ",
+    "默认(文本)": "Défaut (texte)",
+    "序号": "Index",
+    "图片": "Image",
+    "单元格高度": "Hauteur de cellule",
+    "条形码、二维码以及图片有效": "Code à barres, QR code et image sont valides",
+    "底部聚合标题": "Titre du récapitulatif",
+    "底部聚合文本": "Texte du récapitulatif",
+    "聚合类型": "Type de récapitulatif",
+    "底部聚合合并列数": "Colonnes fusionnées du récapitulatif",
+    "合并列数": "Colonnes fusionnées",
+    "底部聚合类型左右对齐": "Alignement du récapitulatif",
+    "整数": "Entier",
+    "保留%s位": "Garder %s décimales",
+    "底部聚合小数": "Décimales du récapitulatif",
+    "转大小写": "Majuscules ou minuscules",
+    "底部聚合类型": "Type de récapitulatif",
+    "不聚合": "Pas de récapitulatif",
+    "仅文本": "Texte uniquement",
+    "顶部偏移": "Décalage supérieur",
+    "一行多组": "Plusieurs groupes sur une ligne",
+    "一行二列": "Une ligne deux colonnes",
+    "一行三列": "Une ligne trois colonnes",
+    "一行四列": "Une ligne quatre colonnes",
+    "一行多组间隔": "Espacement de plusieurs groupes sur une ligne",
+    "表格头显示": "Affichage de l'en-tête du tableau",
+    "每页显示": "Afficher par page",
+    "首页显示": "Afficher sur la première page",
+    "不显示": "Ne pas afficher",
+    "数据类型": "Type de données",
+    "日期时间": "DateHeure",
+    "布尔": "Booléen",
+    "格式": "Format",
+    "格式化函数": "Fonction de mise en forme",
+    "样式函数": "Fonction de style",
+    "行/列合并函数": "Fusionner ligne/colonne",
+    "跨页合并是否清除": "Annuler fusion sur saut de page",
+    "表格脚函数": "Fonction pied de tableau",
+    "分组字段函数": "Fonction Champ de regroupement",
+    "分组头格式化函数": "Fonction de mise en forme en-tête de groupe",
+    "分组头信息": "Informations en-tête de groupe",
+    "分组脚格式化函数": "Fonction de mise en forme pied de groupe",
+    "分组脚信息": "Informations pied de groupe",
+    "多组表格脚函数": "Fonction pied de tableau multi-groupe",
+    "行样式函数": "Fonction style de ligne",
+    "单元格左右对齐": "Alignement des cellules",
+    "单元格上下对齐": "Alignement vertical des cellules",
+    "上": "Haut",
+    "中": "Milieu",
+    "表格头单元格左右对齐": "Alignement des cellules d'en-tête",
+    "单元格样式函数": "Fonction style de cellule",
+    "表格头样式函数": "Fonction style d'en-tête",
+    "单元格格式化函数": "Fonction de mise en forme de cellule",
+    "单元格渲染函数": "Fonction d'affichage de cellule",
+    "自动补全": "Saisie automatique",
+    "每页最大行数": "Lignes max par page",
+    "表格脚显示": "Affichage pied de tableau",
+    "最后显示": "Afficher sur dernière page",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "Pas assez d'espace pour la pagination du tableau, veuillez ajuster la ligne d'entête/pied de page",
+    "没有足够空间,显示下方内容, 可分页高度": "Pas assez de place, afficher le contenu ci-dessous, la hauteur peut être paginée :",
+    "列属性": "Propriété de colonne",
+    "在上方插入行": "Insérer ligne au-dessus",
+    "在下方插入行": "Insérer ligne en dessous",
+    "向左方插入列": "Insérer colonne à gauche",
+    "向右方插入列": "Insérer colonne à droite",
+    "删除行": "Supprimer ligne",
+    "删除列": "Supprimer colonne",
+    "对齐": "Aligner",
+    "左": "Gauche",
+    "左右居中": "Centrer",
+    "右": "Droite",
+    "下": "Bas",
+    "合并单元格": "Fusionner cellule",
+    "解开单元格": "Défusionner cellule",
+    "条形码生成失败": "Échec de la génération de code à barres",
+    "请检查 hiprint.init 的 provider 是否配置了": "Veuillez vérifier si le fournisseur de hiprint.init est configuré",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "'TableCustom' a été supprimé, veuillez le remplacer par 'table', voir le journal de mise à jour pour plus de détails",
+    "确定": "Confirmer",
+    "删除": "Supprimer",
+    "连接客户端失败": "Échec de connexion au client",
+    "基础": "De base",
+    "边框": "Bordure",
+    "列": "Colonne",
+    "高级": "Avancé",
+    "面板排列": "Agencement du panneau",
+    "排列方式": "Mode d'agencement",
+    "垂直间距%s": "Espacement Vertical %s",
+    "水平间距%s": "Espacement Horizontal %s",
+    "边框圆角": "Rayon de Bordure"
+}

src/i18n/it.json

@@ -0,0 +1,249 @@
+{
+    "请选择字段": "Seleziona campo",
+    "计数": "Conteggio",
+    "合计": "Somma",
+    "平均值": "Media",
+    "最小值": "Minimo",
+    "最大值": "Massimo",
+    "此格式不支持该文本": "Questo formato non supporta questo testo",
+    "二维码生成失败": "Generazione codice QR non riuscita",
+    "字体行高": "Altezza carattere",
+    "默认": "Predefinito",
+    "字体": "Carattere",
+    "宋体": "SimSun",
+    "微软雅黑": "Microsoft YaHei",
+    "字体大小": "Dimensione carattere",
+    "字体粗细": "Spessore carattere",
+    "更细": "Più leggero ",
+    "粗体": "Grassetto",
+    "粗体+": "Più grassetto",
+    "字间距": "Spaziatura lettere",
+    "左右对齐": "Giustificato",
+    "居左": "Sinistra",
+    "居中": "Centrato",
+    "居右": "Destra",
+    "两端对齐": "Giustificato",
+    "标题显示隐藏": "Visualizzazione titolo",
+    "显示": "Mostra",
+    "隐藏": "Nascondi",
+    "表格边框": "Bordo tabella",
+    "有边框": "Sì",
+    "无边框": "No",
+    "表头边框": "Bordo intestazione",
+    "左边框": "Sinistra",
+    "右边框": "Destra",
+    "左右边框": "Sinistra e destra",
+    "上边框": "Alto",
+    "下边框": "Basso",
+    "上下边框": "Alto e basso",
+    "表头单元格边框": "Bordo cella intestazione",
+    "表尾边框": "Bordo piè di pagina",
+    "表尾单元格边框": "Bordo cella piè di pagina",
+    "表头行高": "Altezza riga intestazione",
+    "表头字体大小": "Dimensione carattere intestazione",
+    "表头字体粗细": "Spessore carattere intestazione",
+    "表体单元格边框": "Bordo cella corpo",
+    "表体行高": "Altezza riga corpo",
+    "表头背景": "Sfondo intestazione",
+    "线宽": "Larghezza linea",
+    "边框大小": "Dimensione bordo",
+    "条形码格式": "Tipo codice a barre",
+    "商品条码": "Codice a barre prodotto",
+    "条形码": "Codice a barre",
+    "物流": "Logistica",
+    "邮政和快递编码": "Codice postale e corriere",
+    "医疗产品编码": "Codice prodotto medico",
+    "不常用编码": "Codice insolito",
+    "附加组件": "Componente aggiuntivo",
+    "实验编码": "Codice sperimentale",
+    "条码类型": "Tipo di codice a barre",
+    "二维码类型": "Tipo codice QR",
+    "二维码容错率": "Livello correzione errore codice QR",
+    "字体颜色": "Colore carattere",
+    "文本修饰": "Decorazione testo",
+    "下划线": "Sottolineato",
+    "上划线": "Barrato",
+    "穿梭线": "Barrato",
+    "字段名": "Nome campo",
+    "请输入字段名": "Inserisci nome campo",
+    "标题": "Titolo",
+    "请输入标题": "Inserisci titolo",
+    "测试数据": "Dati di prova",
+    "仅字段名称存在时有效": "Valido solo quando esiste nome campo",
+    "位置坐标": "Coordinate di posizione",
+    "X位置(左)": "Posizione X (sinistra)",
+    "Y位置(上)": "Posizione Y (alto)",
+    "同步": "Sincronizzare",
+    "不同步": "Non sincronizzare",
+    "宽高大小": "Larghezza e altezza",
+    "宽": "Larghezza",
+    "高": "Altezza",
+    "图片地址": "URL immagine",
+    "请输入图片地址": "Inserisci URL immagine",
+    "选择": "Scegliere",
+    "图片缩放": "Ridimensionamento immagine",
+    "等比": "Proporzionale",
+    "裁切": "Ritagliare",
+    "填充": "Riempire",
+    "原始尺寸": "Dimensione originale",
+    "颜色": "Colore",
+    "边框颜色": "Colore bordo",
+    "水印功能": "Filigrana",
+    "水印内容": "Contenuto filigrana",
+    "旋转角度": "Angolo di rotazione",
+    "水平密度": "Densità orizzontale",
+    "垂直密度": "Densità verticale",
+    "水印时间": "Ora filigrana",
+    "时间格式": "Formato ora",
+    "页码格式": "Formato numero pagina",
+    "显示页码": "Mostra numero pagina",
+    "页码续排": "Continua numero pagina",
+    "续排": "Continua",
+    "重排": "Ripristina",
+    "每行缩进": "Rientro",
+    "显示规则": "Regola di visualizzazione",
+    "始终隐藏": "Nascondi sempre",
+    "首页": "Prima pagina",
+    "奇数页": "Pagine dispari",
+    "偶数页": "Pagine pari",
+    "尾页": "Ultima pagina",
+    "强制分页": "Forza interruzione pagina",
+    "是": "Sì",
+    "否": "No",
+    "打印规则": "Regola di stampa",
+    "保持奇数": "Mantieni dispari",
+    "保持偶数": "Mantieni pari",
+    "分页规则": "Regola interruzione pagina",
+    "不分页": "Nessuna interruzione pagina",
+    "移除段落左侧空白": "Rimuovi spazio vuoto a sinistra",
+    "移除": "Rimuovere",
+    "不移除": "Non rimuovere",
+    "首页页尾": "Piè di pagina prima pagina",
+    "尾页页尾": "Piè di pagina ultima pagina",
+    "偶数页页尾": "Piè di pagina pagine pari",
+    "奇数页页尾": "Piè di pagina pagine dispari",
+    "位置固定": "Posizione fissa",
+    "拖动方向": "Direzione trascinamento",
+    "横向": "Orizzontale",
+    "竖向": "Verticale",
+    "左偏移": "Scostamento a sinistra",
+    "偏移量": "Scostamento",
+    "最低高度": "Altezza minima",
+    "文本过短或为空时的高度": "Altezza quando testo troppo corto o vuoto",
+    "隐藏规则": "Regola nascondi",
+    "表体行边框": "Bordo riga corpo",
+    "元素层级": "Indice Z",
+    "边框设置": "Impostazioni bordo",
+    "实线": "Continuo",
+    "虚线": "Tratteggiato",
+    "左内边距": "Riempimento sinistro",
+    "上内边距": "Riempimento superiore",
+    "右内边距": "Riempimento destro",
+    "下内边距": "Riempimento inferiore",
+    "样式": "Stile",
+    "边框样式": "Stile bordo",
+    "长虚线": "Tratteggiato lungo",
+    "短虚线": "Tratteggiato corto",
+    "背景颜色": "Colore sfondo",
+    "纸张方向(仅自定义纸质有效)": "Orientamento carta (solo carta personalizzata)",
+    "纵向": "Verticale",
+    "上下对齐": "Allineamento verticale",
+    "垂直居中": "Centrato verticalmente",
+    "底部": "In basso",
+    "文本换行": "A capo automatico",
+    "不换行": "Nessun a capo",
+    "不换行&隐藏": "Nessun a capo e nascondi",
+    "不换行&省略": "Nessun a capo e puntini",
+    "打印类型": "Tipo di stampa",
+    "文本": "Testo",
+    "二维码": "Codice QR",
+    "字段类型": "Tipo di campo",
+    "默认(文本)": "Predefinito (testo)",
+    "序号": "Indice",
+    "图片": "Immagine",
+    "单元格高度": "Altezza cella",
+    "条形码、二维码以及图片有效": "Codice a barre, codice QR e immagine validi",
+    "底部聚合标题": "Titolo del riepilogo",
+    "底部聚合文本": "Testo del riepilogo",
+    "聚合类型": "Tipo di riepilogo",
+    "底部聚合合并列数": "Colonne del riepilogo unite",
+    "合并列数": "Colonne unite",
+    "底部聚合类型左右对齐": "Allineamento riepilogo",
+    "整数": "Intero",
+    "保留%s位": "Mantieni %s decimali",
+    "底部聚合小数": "Decimali del riepilogo",
+    "转大小写": "Maiuscole o minuscole",
+    "底部聚合类型": "Tipo di riepilogo",
+    "不聚合": "Nessun riepilogo",
+    "仅文本": "Solo testo",
+    "顶部偏移": "Scostamento superiore",
+    "一行多组": "Più gruppi in una riga",
+    "一行二列": "Una riga due colonne",
+    "一行三列": "Una riga tre colonne",
+    "一行四列": "Una riga quattro colonne",
+    "一行多组间隔": "Spaziatura più gruppi in una riga",
+    "表格头显示": "Visualizzazione intestazione tabella",
+    "每页显示": "Mostra per pagina",
+    "首页显示": "Mostra in prima pagina",
+    "不显示": "Non visualizzare",
+    "数据类型": "Tipo di dati",
+    "日期时间": "DataOra",
+    "布尔": "Booleano",
+    "格式": "Formato",
+    "格式化函数": "Funzione di formattazione",
+    "样式函数": "Funzione di stile",
+    "行/列合并函数": "Unisci riga/colonna",
+    "跨页合并是否清除": "Annulla unione interruzione pagina",
+    "表格脚函数": "Funzione piè di pagina tabella",
+    "分组字段函数": "Funzione campo di raggruppamento",
+    "分组头格式化函数": "Funzione di formattazione intestazione gruppo",
+    "分组头信息": "Informazioni intestazione gruppo",
+    "分组脚格式化函数": "Funzione di formattazione piè di gruppo",
+    "分组脚信息": "Informazioni piè di gruppo",
+    "多组表格脚函数": "Funzione piè di pagina tabella multi-gruppo",
+    "行样式函数": "Funzione stile riga",
+    "单元格左右对齐": "Allineamento cella",
+    "单元格上下对齐": "Allineamento verticale cella",
+    "上": "Alto",
+    "中": "Centro",
+    "表格头单元格左右对齐": "Allineamento cella intestazione",
+    "单元格样式函数": "Funzione stile cella",
+    "表格头样式函数": "Funzione stile intestazione",
+    "单元格格式化函数": "Funzione di formattazione cella",
+    "单元格渲染函数": "Funzione di rendering cella",
+    "自动补全": "Completamento automatico",
+    "每页最大行数": "Righe massime per pagina",
+    "表格脚显示": "Visualizzazione piè di pagina tabella",
+    "最后显示": "Mostra nell'ultima pagina",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "Spazio insufficiente per la paginazione della tabella, regolare la linea di intestazione/piè di pagina",
+    "没有足够空间,显示下方内容, 可分页高度": "Spazio insufficiente, visualizza il contenuto sottostante, l'altezza può essere impaginata:",
+    "列属性": "Proprietà colonna",
+    "在上方插入行": "Inserisci riga sopra",
+    "在下方插入行": "Inserisci riga sotto",
+    "向左方插入列": "Inserisci colonna a sinistra",
+    "向右方插入列": "Inserisci colonna a destra",
+    "删除行": "Elimina riga",
+    "删除列": "Elimina colonna",
+    "对齐": "Allinea",
+    "左": "Sinistra",
+    "左右居中": "Centra",
+    "右": "Destra",
+    "下": "Basso",
+    "合并单元格": "Unisci cella",
+    "解开单元格": "Separa cella",
+    "条形码生成失败": "Generazione codice a barre non riuscita",
+    "请检查 hiprint.init 的 provider 是否配置了": "Controlla se il provider di hiprint.init è configurato",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "'TableCustom' è stato rimosso, sostituirlo con 'table', vedi il log di aggiornamento per i dettagli",
+    "确定": "Conferma",
+    "删除": "Elimina",
+    "连接客户端失败": "Connessione al client non riuscita",
+    "基础": "Di base",
+    "边框": "Bordo",
+    "列": "Colonna",
+    "高级": "Avanzate",
+    "面板排列": "Disposizione del pannello",
+    "排列方式": "Metodo di disposizione",
+    "垂直间距%s": "Spaziatura Verticale %s",
+    "水平间距%s": "Spaziatura Orizzontale %s",
+    "边框圆角": "Raggio del Bordo"
+}

src/i18n/ja.json

@@ -0,0 +1,249 @@
+{
+    "请选择字段": "フィールドを選択してください",
+    "计数": "カウント",
+    "合计": "合計",
+    "平均值": "平均",
+    "最小值": "最小値",
+    "最大值": "最大値",
+    "此格式不支持该文本": "このフォーマットはこのテキストをサポートしていません",
+    "二维码生成失败": "QRコードの生成に失敗しました",
+    "字体行高": "フォントの行の高さ",
+    "默认": "デフォルト",
+    "字体": "フォント",
+    "宋体": "明朝",
+    "微软雅黑": "Yu Gothic",
+    "字体大小": "フォントサイズ",
+    "字体粗细": "フォントの太さ",
+    "更细": "より細い",
+    "粗体": "太字",
+    "粗体+": "より太字",
+    "字间距": "文字間隔",
+    "左右对齐": "両端揃え",
+    "居左": "左寄せ",
+    "居中": "中央寄せ",
+    "居右": "右寄せ",
+    "两端对齐": "両端揃え",
+    "标题显示隐藏": "タイトルの表示/非表示",
+    "显示": "表示",
+    "隐藏": "非表示",
+    "表格边框": "表の罫線",
+    "有边框": "罫線あり",
+    "无边框": "罫線なし",
+    "表头边框": "ヘッダーの罫線",
+    "左边框": "左罫線",
+    "右边框": "右罫線",
+    "左右边框": "左右罫線",
+    "上边框": "上罫線",
+    "下边框": "下罫線",
+    "上下边框": "上下罫線",
+    "表头单元格边框": "ヘッダーのセル罫線",
+    "表尾边框": "フッターの罫線",
+    "表尾单元格边框": "フッターのセル罫線",
+    "表头行高": "ヘッダーの行の高さ",
+    "表头字体大小": "ヘッダーのフォントサイズ",
+    "表头字体粗细": "ヘッダーのフォントの太さ",
+    "表体单元格边框": "本体のセル罫線",
+    "表体行高": "本体の行の高さ",
+    "表头背景": "ヘッダーの背景",
+    "线宽": "線の太さ",
+    "边框大小": "罫線の太さ",
+    "条形码格式": "バーコードの形式",
+    "商品条码": "商品バーコード",
+    "条形码": "バーコード",
+    "物流": "物流",
+    "邮政和快递编码": "郵便および宅配便番号",
+    "医疗产品编码": "医療用品コード",
+    "不常用编码": "あまり使われないコード",
+    "附加组件": "付属品",
+    "实验编码": "実験的コード",
+    "条码类型": "バーコードのタイプ",
+    "二维码类型": "QRコードのタイプ",
+    "二维码容错率": "QRコードの誤り訂正レベル",
+    "字体颜色": "文字色",
+    "文本修饰": "テキストの装飾",
+    "下划线": "下線",
+    "上划线": "上線",
+    "穿梭线": "取り消し線",
+    "字段名": "フィールド名",
+    "请输入字段名": "フィールド名を入力してください",
+    "标题": "タイトル",
+    "请输入标题": "タイトルを入力してください",
+    "测试数据": "テストデータ",
+    "仅字段名称存在时有效": "フィールド名があるときのみ有効",
+    "位置坐标": "位置座標",
+    "X位置(左)": "X位置(左)",
+    "Y位置(上)": "Y位置(上)",
+    "同步": "同期",
+    "不同步": "非同期",
+    "宽高大小": "幅と高さ",
+    "宽": "幅",
+    "高": "高さ",
+    "图片地址": "画像のURL",
+    "请输入图片地址": "画像のURLを入力してください",
+    "选择": "選択",
+    "图片缩放": "画像の拡大/縮小",
+    "等比": "等倍",
+    "裁切": "切り抜き",
+    "填充": "埋め込み",
+    "原始尺寸": "オリジナルサイズ",
+    "颜色": "色",
+    "边框颜色": "罫線の色",
+    "水印功能": "透かし",
+    "水印内容": "透かしの内容",
+    "旋转角度": "回転角度",
+    "水平密度": "水平方向の密度",
+    "垂直密度": "垂直方向の密度",
+    "水印时间": "透かしの時刻",
+    "时间格式": "時刻のフォーマット",
+    "页码格式": "ページ番号のフォーマット",
+    "显示页码": "ページ番号を表示",
+    "页码续排": "ページ番号の続き",
+    "续排": "続き",
+    "重排": "リセット",
+    "每行缩进": "行頭字下げ",
+    "显示规则": "表示ルール",
+    "始终隐藏": "常に非表示",
+    "首页": "最初のページ",
+    "奇数页": "奇数ページ",
+    "偶数页": "偶数ページ",
+    "尾页": "最終ページ",
+    "强制分页": "改ページを強制",
+    "是": "はい",
+    "否": "いいえ",
+    "打印规则": "印刷ルール",
+    "保持奇数": "奇数ページを維持",
+    "保持偶数": "偶数ページを維持",
+    "分页规则": "改ページルール",
+    "不分页": "改ページなし",
+    "移除段落左侧空白": "段落左側の空白を削除",
+    "移除": "削除する",
+    "不移除": "削除しない",
+    "首页页尾": "最初のページのフッター",
+    "尾页页尾": "最終ページのフッター",
+    "偶数页页尾": "偶数ページのフッター",
+    "奇数页页尾": "奇数ページのフッター",
+    "位置固定": "固定位置",
+    "拖动方向": "ドラッグ方向",
+    "横向": "横方向",
+    "竖向": "縦方向",
+    "左偏移": "左端からのオフセット",
+    "偏移量": "オフセット量",
+    "最低高度": "最小の高さ",
+    "文本过短或为空时的高度": "テキストが短すぎるか空のときの高さ",
+    "隐藏规则": "非表示ルール",
+    "表体行边框": "本体の行の罫線",
+    "元素层级": "Zインデックス",
+    "边框设置": "枠線の設定",
+    "实线": "実線",
+    "虚线": "点線",
+    "左内边距": "左のパディング",
+    "上内边距": "上のパディング",
+    "右内边距": "右のパディング",
+    "下内边距": "下のパディング",
+    "样式": "スタイル",
+    "边框样式": "枠線のスタイル",
+    "长虚线": "長点線",
+    "短虚线": "短点線",
+    "背景颜色": "背景色",
+    "纸张方向(仅自定义纸质有效)": "用紙の向き(カスタム用紙のみ有効)",
+    "纵向": "縦方向",
+    "上下对齐": "上下の配置",
+    "垂直居中": "垂直中央揃え",
+    "底部": "下揃え",
+    "文本换行": "テキストの折り返し",
+    "不换行": "折り返さない",
+    "不换行&隐藏": "折り返さず非表示",
+    "不换行&省略": "折り返さず省略記号",
+    "打印类型": "印刷タイプ",
+    "文本": "テキスト",
+    "二维码": "QRコード",
+    "字段类型": "フィールドタイプ",
+    "默认(文本)": "デフォルト(テキスト)",
+    "序号": "インデックス",
+    "图片": "画像",
+    "单元格高度": "セルの高さ",
+    "条形码、二维码以及图片有效": "バーコード、QRコード、画像有効",
+    "底部聚合标题": "集計タイトル",
+    "底部聚合文本": "集計テキスト",
+    "聚合类型": "集計のタイプ",
+    "底部聚合合并列数": "集計の結合列数",
+    "合并列数": "結合列数",
+    "底部聚合类型左右对齐": "集計の左右揃え",
+    "整数": "整数",
+    "保留%s位": "%s桁を保持",
+    "底部聚合小数": "集計の小数点以下桁数",
+    "转大小写": "大文字小文字の変換",
+    "底部聚合类型": "集計のタイプ",
+    "不聚合": "集計しない",
+    "仅文本": "テキストのみ",
+    "顶部偏移": "上部のオフセット",
+    "一行多组": "1行複数グループ",
+    "一行二列": "1行2列",
+    "一行三列": "1行3列",
+    "一行四列": "1行4列",
+    "一行多组间隔": "1行複数グループの間隔",
+    "表格头显示": "表ヘッダーの表示",
+    "每页显示": "1ページごとに表示",
+    "首页显示": "最初のページに表示",
+    "不显示": "表示しない",
+    "数据类型": "データ型",
+    "日期时间": "日時",
+    "布尔": "ブール",
+    "格式": "フォーマット",
+    "格式化函数": "書式設定関数",
+    "样式函数": "スタイル関数",
+    "行/列合并函数": "行/列のマージ関数",
+    "跨页合并是否清除": "改ページでのマージをクリアするか",
+    "表格脚函数": "表のフッター関数",
+    "分组字段函数": "グループフィールド関数",
+    "分组头格式化函数": "グループヘッダーの書式設定関数",
+    "分组头信息": "グループヘッダー情報",
+    "分组脚格式化函数": "グループフッターの書式設定関数",
+    "分组脚信息": "グループフッター情報",
+    "多组表格脚函数": "複数グループ表のフッター関数",
+    "行样式函数": "行のスタイル関数",
+    "单元格左右对齐": "セルの左右揃え",
+    "单元格上下对齐": "セルの上下揃え",
+    "上": "上",
+    "中": "中央",
+    "表格头单元格左右对齐": "ヘッダーセルの左右揃え",
+    "单元格样式函数": "セルのスタイル関数",
+    "表格头样式函数": "ヘッダーのスタイル関数",
+    "单元格格式化函数": "セルの書式設定関数",
+    "单元格渲染函数": "セルのレンダリング関数",
+    "自动补全": "オートコンプリート",
+    "每页最大行数": "1ページ最大行数",
+    "表格脚显示": "表のフッターの表示",
+    "最后显示": "最終ページで表示",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "表のページ分割のための十分なスペースがありません。ヘッダー/フッターの線を調整してください",
+    "没有足够空间,显示下方内容, 可分页高度": "スペースが十分ではありません。下のコンテンツを表示し、高さはページ分割できます:",
+    "列属性": "列のプロパティ",
+    "在上方插入行": "上に行を挿入",
+    "在下方插入行": "下に行を挿入",
+    "向左方插入列": "左に列を挿入",
+    "向右方插入列": "右に列を挿入 ",
+    "删除行": "行を削除",
+    "删除列": "列を削除",
+    "对齐": "配置",
+    "左": "左",
+    "左右居中": "中央",
+    "右": "右",
+    "下": "下",
+    "合并单元格": "セルをマージ",
+    "解开单元格": "マージを解除",
+    "条形码生成失败": "バーコードの生成に失敗しました",
+    "请检查 hiprint.init 的 provider 是否配置了": "hiprint.init のプロバイダが設定されていることを確認してください",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "'tableCustom'は削除されました。'table'に置き換えてください。詳細は更新ログを参照してください。",
+    "确定": "確定",
+    "删除": "削除",
+    "连接客户端失败": "クライアントへの接続に失敗しました",
+    "基础": "基本",
+    "边框": "枠線",
+    "列": "列",
+    "高级": "高度",
+    "面板排列": "パネル配置",
+    "排列方式": "配列方法",
+    "垂直间距%s": "垂直間隔 %s",
+    "水平间距%s": "水平間隔 %s",
+    "边框圆角": "ボーダーラジウス"
+}

src/i18n/ru.json

@@ -0,0 +1,249 @@
+{
+    "请选择字段": "Пожалуйста, выберите поле",
+    "计数": "Подсчет",
+    "合计": "Сумма",
+    "平均值": "Среднее значение",
+    "最小值": "Минимум",
+    "最大值": "Максимум",
+    "此格式不支持该文本": "Этот формат не поддерживает такой текст",
+    "二维码生成失败": "Сбой генерации QR-кода",
+    "字体行高": "Высота строки шрифта",
+    "默认": "По умолчанию",
+    "字体": "Шрифт",
+    "宋体": "SimSun",
+    "微软雅黑": "Microsoft YaHei",
+    "字体大小": "Размер шрифта",
+    "字体粗细": "Толщина шрифта",
+    "更细": "Тоньше",
+    "粗体": "Жирный",
+    "粗体+": "Жирнее",
+    "字间距": "Межбуквенный интервал",
+    "左右对齐": "По ширине",
+    "居左": "По левому краю",
+    "居中": "По центру",
+    "居右": "По правому краю",
+    "两端对齐": "По ширине",
+    "标题显示隐藏": "Отображение заголовка",
+    "显示": "Показывать",
+    "隐藏": "Скрыть",
+    "表格边框": "Граница таблицы",
+    "有边框": "Да",
+    "无边框": "Нет",
+    "表头边框": "Граница заголовка",
+    "左边框": "Левая граница",
+    "右边框": "Правая граница",
+    "左右边框": "Левая и правая границы",
+    "上边框": "Верхняя граница",
+    "下边框": "Нижняя граница",
+    "上下边框": "Верхняя и нижняя границы",
+    "表头单元格边框": "Граница ячейки заголовка",
+    "表尾边框": "Граница подвала",
+    "表尾单元格边框": "Граница ячейки подвала",
+    "表头行高": "Высота строки заголовка",
+    "表头字体大小": "Размер шрифта заголовка",
+    "表头字体粗细": "Толщина шрифта заголовка",
+    "表体单元格边框": "Граница ячейки основной части",
+    "表体行高": "Высота строки основной части",
+    "表头背景": "Фон заголовка",
+    "线宽": "Толщина линии",
+    "边框大小": "Размер границы",
+    "条形码格式": "Тип штрихкода",
+    "商品条码": "Штрихкод товара",
+    "条形码": "Штрихкод",
+    "物流": "Логистика",
+    "邮政和快递编码": "Почтовый и курьерский код",
+    "医疗产品编码": "Код медицинского продукта",
+    "不常用编码": "Нестандартный код",
+    "附加组件": "Дополнительный компонент",
+    "实验编码": "Экспериментальный код",
+    "条码类型": "Тип штрихкода",
+    "二维码类型": "Тип QR-кода",
+    "二维码容错率": "Уровень коррекции ошибок QR-кода",
+    "字体颜色": "Цвет шрифта",
+    "文本修饰": "Оформление текста",
+    "下划线": "Подчеркивание",
+    "上划线": "Надчеркивание",
+    "穿梭线": "Перечеркивание",
+    "字段名": "Имя поля",
+    "请输入字段名": "Пожалуйста, введите имя поля",
+    "标题": "Заголовок",
+    "请输入标题": "Пожалуйста, введите заголовок",
+    "测试数据": "Тестовые данные",
+    "仅字段名称存在时有效": "Действительно только если существует имя поля",
+    "位置坐标": "Координаты позиции",
+    "X位置(左)": "Позиция X (слева)",
+    "Y位置(上)": "Позиция Y (сверху)",
+    "同步": "Синхронизировать",
+    "不同步": "Не синхронизировать",
+    "宽高大小": "Ширина и высота",
+    "宽": "Ширина",
+    "高": "Высота",
+    "图片地址": "URL изображения",
+    "请输入图片地址": "Пожалуйста, введите URL изображения",
+    "选择": "Выбрать",
+    "图片缩放": "Масштаб изображения",
+    "等比": "Пропорционально",
+    "裁切": "Обрезать",
+    "填充": "Заполнить",
+    "原始尺寸": "Исходный размер",
+    "颜色": "Цвет",
+    "边框颜色": "Цвет границы",
+    "水印功能": "Водяной знак",
+    "水印内容": "Содержание водяного знака",
+    "旋转角度": "Угол поворота",
+    "水平密度": "Горизонтальная плотность",
+    "垂直密度": "Вертикальная плотность",
+    "水印时间": "Время водяного знака",
+    "时间格式": "Формат времени",
+    "页码格式": "Формат номера страницы",
+    "显示页码": "Показывать номер страницы",
+    "页码续排": "Продолжить нумерацию страниц",
+    "续排": "Продолжить",
+    "重排": "Сбросить",
+    "每行缩进": "Отступ строки",
+    "显示规则": "Правило отображения",
+    "始终隐藏": "Всегда скрывать",
+    "首页": "Первая страница",
+    "奇数页": "Нечетные страницы",
+    "偶数页": "Четные страницы",
+    "尾页": "Последняя страница",
+    "强制分页": "Принудительный разрыв страницы",
+    "是": "Да",
+    "否": "Нет",
+    "打印规则": "Правило печати",
+    "保持奇数": "Сохранять нечетные",
+    "保持偶数": "Сохранять четные",
+    "分页规则": "Правило разрыва страниц",
+    "不分页": "Без разрыва страниц",
+    "移除段落左侧空白": "Убрать левый отступ",
+    "移除": "Удалить",
+    "不移除": "Не удалять",
+    "首页页尾": "Нижний колонтитул первой страницы",
+    "尾页页尾": "Нижний колонтитул последней страницы",
+    "偶数页页尾": "Нижний колонтитул на четных страницах",
+    "奇数页页尾": "Нижний колонтитул на нечетных страницах",
+    "位置固定": "Фиксированная позиция",
+    "拖动方向": "Направление перетаскивания",
+    "横向": "Горизонтально",
+    "竖向": "Вертикально",
+    "左偏移": "Смещение слева",
+    "偏移量": "Смещение",
+    "最低高度": "Минимальная высота",
+    "文本过短或为空时的高度": "Высота при слишком коротком или пустом тексте",
+    "隐藏规则": "Правило скрытия",
+    "表体行边框": "Граница строки основной части",
+    "元素层级": "Z-индекс",
+    "边框设置": "Настройки границы",
+    "实线": "Сплошная линия",
+    "虚线": "Пунктир",
+    "左内边距": "Отступ слева",
+    "上内边距": "Отступ сверху",
+    "右内边距": "Отступ справа",
+    "下内边距": "Отступ снизу",
+    "样式": "Стиль",
+    "边框样式": "Стиль границы",
+    "长虚线": "Длинный пунктир",
+    "短虚线": "Короткий пунктир",
+    "背景颜色": "Цвет фона",
+    "纸张方向(仅自定义纸质有效)": "Ориентация бумаги (только пользовательская)",
+    "纵向": "Книжная",
+    "上下对齐": "Вертикальное выравнивание",
+    "垂直居中": "По центру по вертикали",
+    "底部": "Внизу",
+    "文本换行": "Перенос строк",
+    "不换行": "Без переноса строк",
+    "不换行&隐藏": "Без переноса строк и скрыть",
+    "不换行&省略": "Без переноса строк и многоточие",
+    "打印类型": "Тип печати",
+    "文本": "Текст",
+    "二维码": "QR-код",
+    "字段类型": "Тип поля",
+    "默认(文本)": "По умолчанию (текст)",
+    "序号": "Индекс",
+    "图片": "Изображение",
+    "单元格高度": "Высота ячейки",
+    "条形码、二维码以及图片有效": "Штрихкод, QR-код и изображение действительны",
+    "底部聚合标题": "Заголовок итогов",
+    "底部聚合文本": "Текст итогов",
+    "聚合类型": "Тип итогов",
+    "底部聚合合并列数": "Количество объединенных столбцов итогов",
+    "合并列数": "Количество объединенных столбцов",
+    "底部聚合类型左右对齐": "Выравнивание итогов",
+    "整数": "Целое число",
+    "保留%s位": "Оставить %s знаков после запятой",
+    "底部聚合小数": "Дробная часть итогов",
+    "转大小写": "Верхний или нижний регистр",
+    "底部聚合类型": "Тип итогов",
+    "不聚合": "Без итогов",
+    "仅文本": "Только текст",
+    "顶部偏移": "Смещение сверху",
+    "一行多组": "Несколько групп в строке",
+    "一行二列": "Одна строка две колонки",
+    "一行三列": "Одна строка три колонки",
+    "一行四列": "Одна строка четыре колонки",
+    "一行多组间隔": "Интервал между группами в строке",
+    "表格头显示": "Отображение заголовка таблицы",
+    "每页显示": "Показывать на странице",
+    "首页显示": "Показывать на первой странице",
+    "不显示": "Не показывать",
+    "数据类型": "Тип данных",
+    "日期时间": "Дата и время",
+    "布尔": "Логический",
+    "格式": "Формат",
+    "格式化函数": "Функция форматирования",
+    "样式函数": "Функция стиля",
+    "行/列合并函数": "Объединение строки/столбца",
+    "跨页合并是否清除": "Очистить объединение перед разрывом страницы",
+    "表格脚函数": "Функция нижнего колонтитула таблицы",
+    "分组字段函数": "Функция поля группировки",
+    "分组头格式化函数": "Функция форматирования заголовка группы",
+    "分组头信息": "Информация заголовка группы",
+    "分组脚格式化函数": "Функция форматирования подвала группы",
+    "分组脚信息": "Информация подвала группы",
+    "多组表格脚函数": "Функция нижнего колонтитула таблицы с несколькими группами",
+    "行样式函数": "Функция стиля строки",
+    "单元格左右对齐": "Выравнивание ячеек по горизонтали",
+    "单元格上下对齐": "Вертикальное выравнивание ячеек",
+    "上": "Вверху",
+    "中": "По центру",
+    "表格头单元格左右对齐": "Горизонтальное выравнивание ячеек заголовка",
+    "单元格样式函数": "Функция стиля ячейки",
+    "表格头样式函数": "Функция стиля заголовка таблицы",
+    "单元格格式化函数": "Функция форматирования ячейки",
+    "单元格渲染函数": "Функция отрисовки ячейки",
+    "自动补全": "Автозаполнение",
+    "每页最大行数": "Макс. строк на странице",
+    "表格脚显示": "Отображение нижнего колонтитула таблицы",
+    "最后显示": "Показать на последней странице",
+    "没有足够空间进行表格分页，请调整页眉/页脚线": "Недостаточно места для постраничного разделения таблицы, отрегулируйте строку заголовка/подвала",
+    "没有足够空间,显示下方内容, 可分页高度": "Недостаточно места, показать содержимое ниже, высоту можно разбить на страницы:",
+    "列属性": "Свойство столбца",
+    "在上方插入行": "Вставить строку выше",
+    "在下方插入行": "Вставить строку ниже",
+    "向左方插入列": "Вставить столбец слева",
+    "向右方插入列": "Вставить столбец справа",
+    "删除行": "Удалить строку",
+    "删除列": "Удалить столбец",
+    "对齐": "Выравнивание",
+    "左": "Слева",
+    "左右居中": "По центру",
+    "右": "Справа",
+    "下": "Внизу",
+    "合并单元格": "Объединить ячейки",
+    "解开单元格": "Разъединить ячейки",
+    "条形码生成失败": "Сбой генерации штрихкода",
+    "请检查 hiprint.init 的 provider 是否配置了": "Проверьте, настроен ли поставщик hiprint.init",
+    "已移除'tableCustom',请替换使用'table'详情见更新记录": "'TableCustom' была удалена, замените ее на 'table', подробности см. в журнале обновлений",
+    "确定": "Подтвердить",
+    "删除": "Удалить",
+    "连接客户端失败": "Не удалось подключиться к клиенту",
+    "基础": "Основные",
+    "边框": "Граница",
+    "列": "Столбец",
+    "高级": "Дополнительно",
+    "面板排列": "Расположение панели",
+    "排列方式": "Способ распределения",
+    "垂直间距%s": "Вертикальный интервал %s",
+    "水平间距%s": "Горизонтальный интервал %s",
+    "边框圆角": "Радиус границы"
+}

src/index.js

@@ -0,0 +1,88 @@
+import {hiprint, defaultElementTypeProvider} from './hiprint/hiprint.bundle.js'
+// 调用浏览器打印js
+import "./hiprint/plugins/jquery.hiwprint.js";
+// 默认配置
+import "./hiprint/hiprint.config";
+// 样式
+import "./hiprint/css/hiprint.css"
+import "./hiprint/css/print-lock.css"
+
+import {version} from '../package.json'
+
+/**
+ * 自动连接 / 连接
+ * cb: 连接回调， (status, msg) {
+ *   // status: true/false
+ *   // msg: status == true 时 返回socket.connect回调 e
+ * }
+ */
+let autoConnect = function(cb) {
+  console.log('autoConnect');
+  window.autoConnect = true;
+  window.hiwebSocket && window.hiwebSocket.hasIo() && window.hiwebSocket.start(cb);
+};
+
+/**
+ * 取消自动连接 / 断开连接
+ */
+let disAutoConnect = function() {
+  console.log('disAutoConnect');
+  window.autoConnect = false;
+  window.hiwebSocket && window.hiwebSocket.hasIo() && window.hiwebSocket.stop();
+};
+
+let hiPrintPlugin = {
+  disAutoConnect,
+  install: function (Vue, name = '$hiPrint', autoConnect = true) {
+    if (!autoConnect) {
+      disAutoConnect();
+    }
+    let globalVue = Vue.prototype || Vue.config.globalProperties;
+    globalVue[name] = hiprint;
+    /**
+   * 预览打印，调起系统打印预览
+	 * provider 左侧拖拽元素
+	 * template 模版json字符串
+	 * args 打印数据data, options,
+	 */
+	 globalVue.$print = function (provider = defaultElementTypeProvider, template, ...args) {
+		 hiprint.init({
+			providers: [new provider()]
+		});
+		var hiprintTemplate = new hiprint.PrintTemplate({
+			template: template,
+		});
+		hiprintTemplate.print(...args);
+		return hiprintTemplate;
+	 }
+	 /**
+    * 单模版直接打印， 需客户端支持
+	  * provider 左侧拖拽项对象
+	  * template 模版json字符串
+	  * args 打印数据data, options,
+	  */
+	 globalVue.$print2 = function (provider = defaultElementTypeProvider, template, ...args) {
+		 hiprint.init({
+			providers: [new provider()]
+		});
+		var hiprintTemplate = new hiprint.PrintTemplate({
+			template: template,
+		});
+		hiprintTemplate.print2(...args);
+		return hiprintTemplate;
+	 }
+  }
+}
+
+hiprint.version = version
+
+window.hiprint = hiprint;
+export {
+  autoConnect,
+  disAutoConnect,
+  hiprint,
+  hiPrintPlugin,
+  defaultElementTypeProvider,
+}
+
+

src/main.js

@@ -73,6 +73,25 @@ Vue.use(AvueFormDesign)
 Vue.use(designer);
 DictData.install()
 
+// 打印设计开始
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+Vue.use(Antd);
+
+import {hiPrintPlugin} from './index'
+Vue.use(hiPrintPlugin)
+hiPrintPlugin.disAutoConnect();
+
+// import Storage from 'vue-ls'
+let options = {
+  namespace: 'hiPrint-',
+  name: 'ls',
+  // storage: 'local',
+};
+// Vue.use(Storage, options);
+Vue.use(options);
+// 打印设计结束
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/utils/index.js

@@ -387,4 +387,25 @@ export function camelCase(str) {
 export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
+
+/**
+ * @description: 打印解析版本号信息
+ * @param {String} ver 版本号
+ * @return {Object} 解析后的版本号信息
+ */
+export function decodeVer(ver) {
+  var matchObj =
+    ver.match(
+      /(?<range>\^|~)?(?<version>(?<mainver>\d+(\.\d+){0,2})(?<appendver>-\w+)?)?/
+    )?.groups || {};
+  matchObj = { ...matchObj, ver };
+  matchObj.mainVal =
+    matchObj.mainver
+      ?.split(".")
+      ?.map((v, i) => v * Math.pow(10, 6 - i * 3))
+      ?.reduce((acc, curr) => acc + curr, 0) || 0;
+  matchObj.appendVal = (matchObj.appendver?.match(/[0-9]+/) || 0) * 1;
+  matchObj.verVal = `${matchObj.mainVal}.${matchObj.appendVal}` * 1;
+  return matchObj;
+}
  

src/views/printdesign/custom/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <a-card>
+    <a-row :gutter="[8,0]" style="margin-bottom: 10px">
+      <a-col :span="4">
+        <!-- 模板选择 -->
+        <a-select v-model='mode' showSearch @change="changeMode" :defaultValue="0" option-label-prop="label"
+                  style="width: 100%;">
+          <a-select-option v-for='(opt,idx) in modeList' :key='idx' :label="opt.name" :value='idx'>
+            {{ opt.name }}
+          </a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="20">
+        <a-space>
+          <!-- 纸张设置 -->
+          <a-button-group>
+            <template v-for="(value,type) in paperTypes">
+              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
+                {{ type }}
+              </a-button>
+            </template>
+            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
+              <div slot="content">
+                <a-input-group compact style="margin: 10px 10px">
+                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
+                           placeholder="宽(mm)"/>
+                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
+                           placeholder="~" disabled
+                  />
+                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
+                           placeholder="高(mm)"/>
+                </a-input-group>
+                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
+              </div>
+              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
+            </a-popover>
+          </a-button-group>
+          <a-button type="text" icon="zoom-out" @click="changeScale(false)"></a-button>
+          <a-input-number
+            :value="scaleValue"
+            :min="scaleMin"
+            :max="scaleMax"
+            :step="0.1"
+            disabled
+            style="width: 70px;"
+            :formatter="value => `${(value * 100).toFixed(0)}%`"
+            :parser="value => value.replace('%', '')"
+          />
+          <a-button type="text" icon="zoom-in" @click="changeScale(true)"></a-button>
+          <!-- 预览/打印 -->
+          <a-button-group>
+            <a-button type="primary" icon="eye" @click="preView">
+              预览
+            </a-button>
+            <a-button type="primary" @click="print">
+              直接打印
+              <a-icon type="printer"/>
+            </a-button>
+          </a-button-group>
+          <!-- 保存/清空 -->
+          <a-button-group>
+            <a-button type="primary" icon="save" @click="save">
+              保存
+            </a-button>
+            <a-popconfirm
+              title="是否确认清空?"
+              okType="danger"
+              okText="确定清空"
+              @confirm="clearPaper"
+            >
+              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
+              <a-button type="danger">
+                清空
+                <a-icon type="close"/>
+              </a-button>
+            </a-popconfirm>
+          </a-button-group>
+          <json-view :template="template"/>
+        </a-space>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[8,0]">
+      <a-col :span="4">
+        <a-card style="height: 100vh">
+          <a-row>
+            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="14">
+        <a-card class="card-design">
+          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
+        </a-card>
+      </a-col>
+      <a-col :span="6" class="params_setting_container">
+        <a-card>
+          <a-row class="hinnn-layout-sider">
+            <div id="PrintElementOptionSetting"></div>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+    <!-- 预览 -->
+    <print-preview ref="preView"/>
+  </a-card>
+</template>
+
+<script>
+
+import printPreview from './preview'
+import jsonView from '../json-view.vue'
+
+import {hiprint} from '../../index'
+import providers from './providers'
+import printData from './print-data'
+
+let hiprintTemplate;
+export default {
+  name: "printCustom",
+  components: {printPreview, jsonView},
+  data() {
+    return {
+      template: null,
+      // 模板选择
+      mode: 0,
+      modeList: [],
+      // 当前纸张
+      curPaper: {
+        type: 'other',
+        width: 220,
+        height: 80
+      },
+      // 纸张类型
+      paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+      scaleValue: 1,
+      scaleMax: 5,
+      scaleMin: 0.5,
+      // 自定义纸张
+      paperPopVisible: false,
+      paperWidth: '220',
+      paperHeight: '80',
+      lastjson: '',
+    }
+  },
+  computed: {
+    curPaperType() {
+      let type = 'other'
+      let types = this.paperTypes
+      for (const key in types) {
+        let item = types[key]
+        let {width, height} = this.curPaper
+        if (item.width === width && item.height === height) {
+          type = key
+        }
+      }
+      return type
+    }
+  },
+  mounted() {
+    this.init()
+    this.otherPaper()
+  },
+  methods: {
+    init() {
+      this.modeList = providers.map((e) => {
+        return {type: e.type, name: e.name, value: e.value}
+      })
+      this.changeMode()
+    },
+    changeMode() {
+      let {mode} = this
+      let provider = providers[mode]
+      hiprint.init({
+        providers: [provider.f]
+      });
+      $('.hiprintEpContainer').empty()
+      hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
+      $('#hiprint-printTemplate').empty()
+      let templates = this.$ls.get('KEY_TEMPLATES', {})
+      let template = templates[provider.value] ? templates[provider.value] : {}
+      this.template = hiprintTemplate = new hiprint.PrintTemplate({
+        template: template,
+        dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
+        history: false, // 是否需要 撤销重做功能
+        onDataChanged: (type, json) => {
+          console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
+          console.log(json); // 返回 template
+          // 更新模板
+          // hiprintTemplate.update(json)
+          // console.log(hiprintTemplate.historyList)
+        },
+        settingContainer: '#PrintElementOptionSetting',
+        paginationContainer: '.hiprint-printPagination'
+      });
+      hiprintTemplate.design('#hiprint-printTemplate');
+      // 获取当前放大比例, 当zoom时传true 才会有
+      this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
+    },
+    /**
+     * 设置纸张大小
+     * @param type [A3, A4, A5, B3, B4, B5, other]
+     * @param value {width,height} mm
+     */
+    setPaper(type, value) {
+      try {
+        if (Object.keys(this.paperTypes).includes(type)) {
+          this.curPaper = {type: type, width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        } else {
+          this.curPaper = {type: 'other', width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        }
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`)
+      }
+    },
+    changeScale(big) {
+      let scaleValue = this.scaleValue;
+      if (big) {
+        scaleValue += 0.1;
+        if (scaleValue > this.scaleMax) scaleValue = 5;
+      } else {
+        scaleValue -= 0.1;
+        if (scaleValue < this.scaleMin) scaleValue = 0.5;
+      }
+      if (hiprintTemplate) {
+        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
+        hiprintTemplate.zoom(scaleValue, true);
+        this.scaleValue = scaleValue;
+      }
+    },
+    otherPaper() {
+      let value = {}
+      value.width = this.paperWidth
+      value.height = this.paperHeight
+      this.paperPopVisible = false
+      this.setPaper('other', value)
+    },
+    preView() {
+      let {width} = this.curPaper
+      this.$refs.preView.show(hiprintTemplate, printData, width)
+    },
+    print() {
+      if (window.hiwebSocket.opened) {
+        const printerList = hiprintTemplate.getPrinterList();
+        console.log(printerList)
+        hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
+        return
+      }
+      this.$error({
+        title: "客户端未连接",
+        content: (h) => (
+          <div>
+            连接【{hiwebSocket.host}】失败！
+            <br />
+            请确保目标服务器已
+            <a
+              href="https://gitee.com/CcSimple/electron-hiprint/releases"
+              target="_blank"
+            >
+              下载
+            </a>
+            并
+            <a href="hiprint://" target="_blank">
+              运行
+            </a>
+            打印服务！
+          </div>
+        ),
+      });
+    },
+    save() {
+      let {mode} = this
+      let provider = providers[mode]
+      this.setTemplate({
+        name: provider.value,
+        json: hiprintTemplate.getJson()
+      })
+    },
+    setTemplate(payload) {
+      let templates = this.$ls.get('KEY_TEMPLATES', {})
+      console.log(payload.json)
+      templates[payload.name] = payload.json
+      this.$ls.set('KEY_TEMPLATES', templates)
+      this.$message.info('保存成功')
+    },
+    clearPaper() {
+      try {
+        hiprintTemplate.clear();
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// build 拖拽
+/deep/ .hiprint-printElement-type > li > ul > li > a {
+  padding: 4px 4px;
+  color: #1296db;
+  line-height: 1;
+  height: auto;
+  text-overflow: ellipsis;
+}
+
+// 默认图片
+/deep/ .hiprint-printElement-image-content {
+  img {
+    content: url("~@/assets/logo.png");
+  }
+}
+
+// 设计容器
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+</style>

src/views/printdesign/custom/preview.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="width+'mm'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content_custom"></div>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">打印预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content_custom').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/custom/providers.js

@@ -0,0 +1,441 @@
+/* eslint-disable */
+import {hiprint} from '../../index'
+
+// 自定义设计元素1
+export const aProvider = function (ops) {
+  var addElementTypes = function (context) {
+    context.removePrintElementTypes("aProviderModule");
+    context.addPrintElementTypes(
+      "aProviderModule",
+      [
+        new hiprint.PrintElementTypeGroup("平台", [
+          {
+            tid: 'aProviderModule.header', title: '单据表头', data: '单据表头', type: 'text',
+            options: {
+              testData: '单据表头',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'aProviderModule.type', title: '单据类型', data: '单据类型', type: 'text',
+            options: {
+              testData: '单据类型',
+              height: 16,
+              fontSize: 15,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'aProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'orderId',
+              testData: 'XS888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'aProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text',
+            options: {
+              field: 'date',
+              testData: '2020-01-01',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'aProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'barcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "barcode"
+            }
+          },
+          {
+            tid: 'aProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'qrcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "qrcode"
+            }
+          },
+          {
+            tid: 'aProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text',
+            options: {
+              testData: '平台名称',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {tid: 'aProviderModule.logo', title: 'Logo', data: '', type: 'image'},
+        ]),
+        new hiprint.PrintElementTypeGroup("库管", [
+          {
+            tid: 'aProviderModule.creater', title: '制单人', data: '李四', type: 'text',
+            options: {
+              field: 'creater',
+              testData: '李四',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'aProviderModule.printDate', title: '打印时间', data: '2022-01-01 09:00', type: 'text',
+            options: {
+              field: 'printDate',
+              testData: '2022-01-01 09:00',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'aProviderModule.signer', title: '库管签字', data: '', type: 'text',
+            options: {
+              title: '库管签字：',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+        ]),
+        new hiprint.PrintElementTypeGroup("表格/其他", [
+          {
+            tid: 'aProviderModule.table', title: '订单数据',
+            type: 'table',
+            options: {
+              field: 'table',
+              tableHeaderRepeat: 'first',
+              tableFooterRepeat: 'last',
+              fields: [
+                {text: '名称', field: 'NAME'},
+                {text: '数量', field: 'SL'},
+                {text: '规格', field: 'GG'},
+                {text: '条码', field: 'TM'},
+                {text: '单价', field: 'DJ'},
+                {text: '金额', field: 'JE'},
+              ],
+            },
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            isEnableEditField: true, //编辑字段
+            isEnableContextMenu: true, //开启右键菜单 默认true
+            isEnableInsertRow: true, //插入行
+            isEnableDeleteRow: true, //删除行
+            isEnableInsertColumn: true, //插入列
+            isEnableDeleteColumn: true, //删除列
+            isEnableMergeCell: true, //合并单元格
+            columns: [
+              [
+                {title: '名称', align: 'center', field: 'NAME', width: 150},
+                {title: '数量', align: 'center', field: 'SL', width: 80},
+                {title: '规格', align: 'center', field: 'GG', width: 80, checked: false},
+                {title: '条码', align: 'center', field: 'TM', width: 100, checked: false},
+                {title: '单价', align: 'center', field: 'DJ', width: 100},
+                {title: '金额', align: 'center', field: 'JE', width: 100, checked: false},
+              ],
+            ],
+            rowsColumnsMerge: function (data, col, index) {
+              // 返回一个数组,参数一为行（rowspan）合并数,参数二为列（colspan）合并数, 被合并的行或者列值设为0
+              if (index == 0) {
+                return [1, data.INDEX % 2 == 1 ? 2 : 1]
+              } else if (index > 0 && index < 2) {
+                return [data.INDEX % 2 == 1 ? 0 : 1, 1]
+              } else {
+                return [data.INDEX % 2 == 1 ? 2 : 0, 1]
+              }
+            },
+            footerFormatter: function (options, rows, data, currentPageGridRowsData) {
+              if (data && data['totalCap']) {
+                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
+              }
+              return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
+            },
+          },
+          {tid: 'aProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'},
+          {
+            tid: 'aProviderModule.longText', title: '长文本', type: 'longText', options: {
+              field: 'test.longText',
+              width: 200,
+              testData: '长文本分页/不分页测试'
+            },
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: 'aProviderModule.hline',
+            title: '横线',
+            type: 'hline'
+          },
+          {
+            tid: 'aProviderModule.vline',
+            title: '竖线',
+            type: 'vline'
+          },
+          {
+            tid: 'aProviderModule.rect',
+            title: '矩形',
+            type: 'rect'
+          },
+          {
+            tid: 'aProviderModule.oval',
+            title: '椭圆',
+            type: 'oval'
+          },
+          {
+            tid: 'aProviderModule.barcode',
+            title: '条形码',
+            type: 'barcode',
+          },
+          {
+            tid: 'aProviderModule.qrcode',
+            title: '二维码',
+            type: 'qrcode',
+          }
+        ])
+      ]
+    );
+  };
+  return {
+    addElementTypes: addElementTypes
+  };
+};
+
+// 自定义设计元素2
+export const bProvider = function (ops) {
+  var addElementTypes = function (context) {
+    context.removePrintElementTypes("bProviderModule");
+    context.addPrintElementTypes(
+      "bProviderModule",
+      [
+        new hiprint.PrintElementTypeGroup("常规", [
+          {
+            tid: 'bProviderModule.header', title: '单据表头', data: '单据表头', type: 'text',
+            options: {
+              testData: '单据表头',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'bProviderModule.type', title: '单据类型', data: '单据类型', type: 'text',
+            options: {
+              testData: '单据类型',
+              height: 16,
+              fontSize: 15,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'bProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'orderId',
+              testData: 'XS888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'bProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text',
+            options: {
+              field: 'date',
+              testData: '2020-01-01',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'bProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'barcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "barcode"
+            }
+          },
+          {
+            tid: 'bProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'qrcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "qrcode"
+            }
+          },
+          {
+            tid: 'bProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text',
+            options: {
+              testData: '平台名称',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {tid: 'bProviderModule.image', title: 'Logo', data: '', type: 'image'},
+        ]),
+        new hiprint.PrintElementTypeGroup("客户", [
+          {
+            tid: 'bProviderModule.khname', title: '客户名称', data: '高级客户', type: 'text',
+            options: {
+              field: 'name',
+              testData: '高级客户',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'bProviderModule.tel', title: '客户电话', data: '18888888888', type: 'text',
+            options: {
+              field: 'tel',
+              testData: '18888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+        ]),
+        new hiprint.PrintElementTypeGroup("表格/其他", [
+          {
+            tid: 'bProviderModule.table', title: '订单数据',
+            type: 'table',
+            options: {
+              field: 'table',
+              fields: [
+                {text: '名称', field: 'NAME'},
+                {text: '数量', field: 'SL'},
+                {text: '规格', field: 'GG'},
+                {text: '条码', field: 'TM'},
+                {text: '单价', field: 'DJ'},
+                {text: '金额', field: 'JE'},
+                {text: '备注', field: 'DETAIL'},
+              ],
+            },
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            columns: [
+              [
+                {title: '名称', align: 'center', field: 'NAME', width: 100},
+                {title: '数量', align: 'center', field: 'SL', width: 100},
+                {title: '条码', align: 'center', field: 'TM', width: 100},
+                {title: '规格', align: 'center', field: 'GG', width: 100},
+                {title: '单价', align: 'center', field: 'DJ', width: 100},
+                {title: '金额', align: 'center', field: 'JE', width: 100},
+                {title: '备注', align: 'center', field: 'DETAIL', width: 100},
+              ]
+            ],
+            footerFormatter: function (options, rows, data, currentPageGridRowsData) {
+              if (data && data['totalCap']) {
+                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
+              }
+              return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
+            },
+          },
+          {tid: 'bProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'},
+          {
+            tid: 'bProviderModule.longText', title: '长文本', type: 'longText', options: {
+              field: 'test.longText',
+              width: 200,
+              testData: '长文本分页/不分页测试'
+            },
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: 'bProviderModule.hline',
+            title: '横线',
+            type: 'hline'
+          },
+          {
+            tid: 'bProviderModule.vline',
+            title: '竖线',
+            type: 'vline'
+          },
+          {
+            tid: 'bProviderModule.rect',
+            title: '矩形',
+            type: 'rect'
+          },
+          {
+            tid: 'bProviderModule.oval',
+            title: '椭圆',
+            type: 'oval'
+          }
+        ])
+      ]
+    );
+  };
+  return {
+    addElementTypes: addElementTypes
+  };
+};
+
+// type: 1供货商 2经销商
+export default [{
+  name: 'A设计',
+  value: 'aProviderModule',
+  type: 1,
+  f: aProvider()
+}, {
+  name: 'B设计',
+  value: 'bProviderModule',
+  type: 2,
+  f: bProvider()
+}]

src/views/printdesign/design/font-size.js

@@ -0,0 +1,38 @@
+export default (function () {
+  function t() {
+    this.name = "fontSize"; // 重写的参数 key
+  }
+  // 涉及修改元素样式， 添加一个 css 方法
+  return t.prototype.css = function (t, e) {
+    if (t && t.length) {
+      if (e) return t.css("font-size", e + "pt"), "font-size:" + e + "pt";
+      t[0].style.fontSize = "";
+    }
+    return null;
+  },
+  // 创建 DOM
+  t.prototype.createTarget = function () {
+    let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
+    let fontSizeList = '\n            <option value="" >默认</option>';
+    list.forEach(function (e) {
+      fontSizeList += '\n            <option value="' + e + '">' + e + 'pt</option>';
+    })
+    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        <select class="auto-submit">        </select>\n        </div>\n    </div>');
+    this.target.find(".auto-submit").append($(fontSizeList));
+    return this.target;
+  },
+  // 获取值
+  t.prototype.getValue = function () {
+    var t = this.target.find("select").val();
+    if (t) return parseFloat(t.toString());
+  },
+  // 设置值
+  t.prototype.setValue = function (t) {
+    t && (this.target.find('option[value="' + t + '"]').length || this.target.find("select").prepend('<option value="' + t + '" >' + t + "</option>"));
+    this.target.find("select").val(t);
+  },
+  // 销毁 DOM
+  t.prototype.destroy = function () {
+    this.target.remove();
+  }, t;
+}())

src/views/printdesign/design/panel-0.0.55-beta3.js

@@ -0,0 +1,341 @@
+export default {
+  "panels": [{
+    "index": 0,
+    "height": 297,
+    "width": 210,
+    "paperHeader": 49.5,
+    "paperFooter": 780,
+    "watermarkOptions": {
+      "content": "vue-plugin-hiprint",
+      "rotate": 25,
+      "timestamp": true,
+      "format": "YYYY-MM-DD HH:mm"
+    },
+    "printElements": [{
+      "options": {
+        "left": 175.5,
+        "top": 10.5,
+        "height": 27,
+        "width": 259,
+        "title": "HiPrint自定义模块打印插件",
+        "fontSize": 19,
+        "fontWeight": "600",
+        "textAlign": "center",
+        "lineHeight": 26,
+        "coordinateSync": true,
+        "widthHeightSync": true,
+        "draggable": false,
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 27, "height": 13, "width": 52, "title": "页眉线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"},
+      "printElementType": {"type": "vline"}
+    }, {
+      "options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": "", "fit": "contain"},
+      "printElementType": {"title": "图片", "type": "image"}
+    }, {
+      "options": {
+        "left": 153,
+        "top": 64.5,
+        "height": 39,
+        "width": 276,
+        "title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 457.5,
+        "top": 79.5,
+        "height": 13,
+        "width": 120,
+        "title": "姓名",
+        "field": "name",
+        "testData": "古力娜扎",
+        "color": "#f00808",
+        "textDecoration": "underline",
+        "textAlign": "center",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+      }, "printElementType": {"title": "文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 483,
+        "top": 115,
+        "height": 60,
+        "width": 60,
+        "title": "123456789",
+        "textAlign": "center",
+        "textType": "qrcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 285,
+        "top": 125,
+        "height": 40,
+        "width": 175,
+        "title": "123456789",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "textType": "barcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 110,
+        "height": 19,
+        "width": 213,
+        "title": "所有打印元素都可已拖拽的方式来改变元素大小",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 130,
+        "height": 40,
+        "width": 40,
+        "title": "qrcode",
+        "field": "qrcode",
+        "testData": "qrcode",
+      },
+      "printElementType": {
+        "title": "二维码",
+        "type": "qrcode",
+      }
+    }, {
+      "options": {
+        "left": 160,
+        "top": 130,
+        "height": 40,
+        "width": 80,
+        "title": "barcode",
+        "field": "barcode",
+        "testData": "barcode",
+      },
+      "printElementType": {
+        "title": "条形码",
+        "type": "barcode",
+      }
+    }, {
+      "options": {
+        "left": 153,
+        "top": 189,
+        "height": 13,
+        "width": 238,
+        "title": "单击元素，右侧可自定义元素属性",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 190.5, "height": 13, "width": 51, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 415.5,
+        "top": 190.5,
+        "height": 13,
+        "width": 164,
+        "title": "可以配置各属性的默认值",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 214.5, "height": 10, "width": 475.5},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 235.5,
+        "top": 220.5,
+        "height": 32,
+        "width": 342,
+        "title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 15
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 156,
+        "top": 265.5,
+        "height": 13,
+        "width": 94,
+        "title": "表头列大小可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 265.5,
+        "height": 13,
+        "width": 90,
+        "title": "红色区域可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 285,
+        "height": 56,
+        "width": 511.5,
+        "field": "table",
+        "tableFooterRepeat": "",
+        "tableBorder": "noBorder",
+        "tableHeaderBorder": "topBorder",
+        "tableHeaderCellBorder": "border",
+        "tableBodyRowBorder": "topBorder",
+        "tableFooterBorder": "topBorder",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+        "columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
+          "title": "性别",
+          "field": "gender",
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": false
+        }, {
+          "title": "姓名",
+          "field": "name",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "count"
+        }, {
+          "title": "数量",
+          "field": "count",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "sum"
+		    }, {
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true
+        }, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]]
+      }, "printElementType": {
+        "title": "表格", "type": "table",
+        // editable: true,
+        // columnDisplayEditable: true,//列显示是否能编辑
+        // columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+        // columnTitleEditable: true,//列标题是否能编辑
+        // columnResizable: true, //列宽是否能调整
+        // columnAlignEditable: true,//列对齐是否调整
+        // isEnableEditField: true, //编辑字段
+        // isEnableContextMenu: true, //开启右键菜单 默认true
+        // isEnableInsertRow: true, //插入行
+        // isEnableDeleteRow: true, //删除行
+        // isEnableInsertColumn: true, //插入列
+        // isEnableDeleteColumn: true, //删除列
+        // isEnableMergeCell: true, //合并单元格
+      }
+    }, {
+      "options": {
+        "left": 21,
+        "top": 346.5,
+        "height": 61.5,
+        "width": 15,
+        "title": "装订线",
+        "lineHeight": 18,
+        "fixed": true,
+        "contentPaddingTop": 3.75,
+        "backgroundColor": "#ffffff"
+      }, "printElementType": {"type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 355,
+        "height": 13,
+        "width": 346.5,
+        "title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 370.5, "height": 18, "width": 79, "title": "配置项表格", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 385.5,
+        "height": 38,
+        "width": 346.5,
+        "title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2",
+        "fontFamily": "微软雅黑",
+        "lineHeight": 15,
+        "textAlign": "center",
+        "color": "#d93838"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 487.5,
+        "height": 13,
+        "width": 123,
+        "title": "长文本会自动分页",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 507, "height": 40, "width": 511.5, "field": "longText"},
+      "printElementType": {"title": "长文", "type": "longText"}
+    }, {
+      "options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100},
+      "printElementType": {"title": "矩形", "type": "rect"}
+    }, {
+      "options": {"left": 174, "top": 568.5, "height": 13, "width": 90, "title": "竖线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 574.5, "height": 100, "width": 10},
+      "printElementType": {"title": "竖线", "type": "vline"}
+    }, {
+      "options": {"left": 210, "top": 604.5, "height": 13, "width": 120, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 364.5,
+        "top": 649.5,
+        "height": 13,
+        "width": 101,
+        "title": "矩形",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 525, "top": 784.5, "height": 13, "width": 63, "title": "页尾线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 12, "top": 786, "height": 49, "width": 49},
+      "printElementType": {"title": "html", "type": "html"}
+    }, {
+      "options": {
+        "left": 75,
+        "top": 790.5,
+        "height": 13,
+        "width": 137,
+        "title": "红色原型是自动定义的Html",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 334.5,
+        "top": 810,
+        "height": 13,
+        "width": 205,
+        "title": "页眉线已上。页尾下以下每页都会重复打印",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }],
+    "paperNumberLeft": 565.5,
+    "paperNumberTop": 819
+  }]
+}

src/views/printdesign/design/panel.js

@@ -0,0 +1,313 @@
+export default {
+  "panels": [{
+    "index": 0,
+    "height": 297,
+    "width": 210,
+    "paperHeader": 49.5,
+    "paperFooter": 780,
+    "watermarkOptions": {
+      "content": "vue-plugin-hiprint",
+      "rotate": 25,
+      "timestamp": true,
+      "format": "YYYY-MM-DD HH:mm"
+    },
+    "printElements": [{
+      "options": {
+        "left": 175.5,
+        "top": 10.5,
+        "height": 27,
+        "width": 259,
+        "title": "HiPrint自定义模块打印插件",
+        "fontSize": 19,
+        "fontWeight": "600",
+        "textAlign": "center",
+        "lineHeight": 26,
+        "coordinateSync": true,
+        "widthHeightSync": true,
+        "draggable": false,
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 27, "height": 13, "width": 52, "title": "页眉线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"},
+      "printElementType": {"type": "vline"}
+    }, {
+      "options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": "", "fit": "contain"},
+      "printElementType": {"title": "图片", "type": "image"}
+    }, {
+      "options": {
+        "left": 153,
+        "top": 64.5,
+        "height": 39,
+        "width": 276,
+        "title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 457.5,
+        "top": 79.5,
+        "height": 13,
+        "width": 120,
+        "title": "姓名",
+        "field": "name",
+        "testData": "古力娜扎",
+        "color": "#f00808",
+        "textDecoration": "underline",
+        "textAlign": "center",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+      }, "printElementType": {"title": "文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 483,
+        "top": 115,
+        "height": 60,
+        "width": 60,
+        "title": "123456789",
+        "textAlign": "center",
+        "textType": "qrcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 285,
+        "top": 125,
+        "height": 40,
+        "width": 175,
+        "title": "123456789",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "textType": "barcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 110,
+        "height": 19,
+        "width": 213,
+        "title": "所有打印元素都可已拖拽的方式来改变元素大小",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 153,
+        "top": 189,
+        "height": 13,
+        "width": 238,
+        "title": "单击元素，右侧可自定义元素属性",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 190.5, "height": 13, "width": 51, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 415.5,
+        "top": 190.5,
+        "height": 13,
+        "width": 164,
+        "title": "可以配置各属性的默认值",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 214.5, "height": 10, "width": 475.5},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 235.5,
+        "top": 220.5,
+        "height": 32,
+        "width": 342,
+        "title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 15
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 156,
+        "top": 265.5,
+        "height": 13,
+        "width": 94,
+        "title": "表头列大小可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 265.5,
+        "height": 13,
+        "width": 90,
+        "title": "红色区域可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 285,
+        "height": 56,
+        "width": 511.5,
+        "field": "table",
+        "tableFooterRepeat": "",
+        "tableBorder": "noBorder",
+        "tableHeaderBorder": "topBorder",
+        "tableHeaderCellBorder": "border",
+        "tableBodyRowBorder": "topBorder",
+        "tableFooterBorder": "topBorder",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+        "columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
+          "title": "性别",
+          "field": "gender",
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": false
+        }, {
+          "title": "姓名",
+          "field": "name",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "count"
+        }, {
+          "title": "数量",
+          "field": "count",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "sum"
+		    }, {
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true
+        }, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]]
+      }, "printElementType": {
+        "title": "表格", "type": "table",
+        // editable: true,
+        // columnDisplayEditable: true,//列显示是否能编辑
+        // columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+        // columnTitleEditable: true,//列标题是否能编辑
+        // columnResizable: true, //列宽是否能调整
+        // columnAlignEditable: true,//列对齐是否调整
+        // isEnableEditField: true, //编辑字段
+        // isEnableContextMenu: true, //开启右键菜单 默认true
+        // isEnableInsertRow: true, //插入行
+        // isEnableDeleteRow: true, //删除行
+        // isEnableInsertColumn: true, //插入列
+        // isEnableDeleteColumn: true, //删除列
+        // isEnableMergeCell: true, //合并单元格
+      }
+    }, {
+      "options": {
+        "left": 21,
+        "top": 346.5,
+        "height": 61.5,
+        "width": 15,
+        "title": "装订线",
+        "lineHeight": 18,
+        "fixed": true,
+        "contentPaddingTop": 3.75,
+        "backgroundColor": "#ffffff"
+      }, "printElementType": {"type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 355,
+        "height": 13,
+        "width": 346.5,
+        "title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 370.5, "height": 18, "width": 79, "title": "配置项表格", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 385.5,
+        "height": 38,
+        "width": 346.5,
+        "title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2",
+        "fontFamily": "微软雅黑",
+        "lineHeight": 15,
+        "textAlign": "center",
+        "color": "#d93838"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 487.5,
+        "height": 13,
+        "width": 123,
+        "title": "长文本会自动分页",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 507, "height": 40, "width": 511.5, "field": "longText"},
+      "printElementType": {"title": "长文", "type": "longText"}
+    }, {
+      "options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100},
+      "printElementType": {"title": "矩形", "type": "rect"}
+    }, {
+      "options": {"left": 174, "top": 568.5, "height": 13, "width": 90, "title": "竖线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 574.5, "height": 100, "width": 10},
+      "printElementType": {"title": "竖线", "type": "vline"}
+    }, {
+      "options": {"left": 210, "top": 604.5, "height": 13, "width": 120, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 364.5,
+        "top": 649.5,
+        "height": 13,
+        "width": 101,
+        "title": "矩形",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 525, "top": 784.5, "height": 13, "width": 63, "title": "页尾线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 12, "top": 786, "height": 49, "width": 49},
+      "printElementType": {"title": "html", "type": "html"}
+    }, {
+      "options": {
+        "left": 75,
+        "top": 790.5,
+        "height": 13,
+        "width": 137,
+        "title": "红色原型是自动定义的Html",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 334.5,
+        "top": 810,
+        "height": 13,
+        "width": 205,
+        "title": "页眉线已上。页尾下以下每页都会重复打印",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }],
+    "paperNumberLeft": 565.5,
+    "paperNumberTop": 819
+  }]
+}

src/views/printdesign/design/preview.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="width+'mm'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content_design"></div>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">打印预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          console.log('callback')
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      this.hiprintTemplate.toPdf({}, '打印预览');
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/design/scale.js

@@ -0,0 +1,31 @@
+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;
+}())

src/views/printdesign/json-view.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <a-button type="primary" @click="show">
+      查看模板json
+    </a-button>
+    <a-modal :visible="visible" :maskClosable="false"
+             @cancel="hideModal">
+      <a-spin :spinning="spinning" style="min-height: 100px">
+        <a-textarea style="width:40vw;height:50vh" v-model:value="jsonOut"/>
+      </a-spin>
+      <template slot="title">
+        <a-space>
+          <div style="margin-right: 20px">JSON</div>
+          <a-switch checked-children="tid模式" un-checked-children="默认" v-model:checked="tidMode"
+                    @change="onModeChange"/>
+          <a-switch checked-children="美化" un-checked-children="压缩" v-model:checked="beautify"
+                    @change="onModeChange"/>
+        </a-space>
+      </template>
+      <template slot="footer">
+        <a-button key="close" type="info" @click="hideModal">
+          关闭
+        </a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JSONView",
+  props: {
+    template: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      jsonOut: "",
+      tidMode: false,
+      beautify: false,
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show() {
+      this.visible = true
+      this.spinning = true
+      setTimeout(() => {
+        let json = this.tidMode ? this.template.getJsonTid() : this.template.getJson();
+        let beautify = this.beautify ? 2 : 0;
+        this.jsonOut = JSON.stringify(json, null, beautify);
+        this.spinning = false
+      }, 500)
+    },
+    onModeChange() {
+      this.show();
+    }
+  }
+}
+
+</script>
+<style lang="less" scoped>
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/panels/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <a-card>
+    <a-row :gutter="[8,0]" style="margin-bottom: 10px">
+      <a-col :span="4">
+        <!-- 模板选择 -->
+        <a-select v-model='mode' showSearch @change="changeMode" :defaultValue="0" option-label-prop="label"
+                  style="width: 100%;">
+          <a-select-option v-for='(opt,idx) in modeList' :key='idx' :label="opt.name" :value='idx'>
+            {{ opt.name }}
+          </a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="20">
+        <a-row>
+          <a-space>
+            <!-- 纸张设置 -->
+            <a-button-group>
+              <template v-for="(value,type) in paperTypes">
+                <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
+                  {{ type }}
+                </a-button>
+              </template>
+              <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
+                <div slot="content">
+                  <a-input-group compact style="margin: 10px 10px">
+                    <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
+                             placeholder="宽(mm)"/>
+                    <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
+                             placeholder="~" disabled
+                    />
+                    <a-input type="number" v-model="paperHeight"
+                             style="width: 100px; text-align: center; border-left: 0"
+                             placeholder="高(mm)"/>
+                  </a-input-group>
+                  <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
+                </div>
+                <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
+              </a-popover>
+            </a-button-group>
+            <a-button type="text" icon="zoom-out" @click="changeScale(false)"></a-button>
+            <a-input-number
+              :value="scaleValue"
+              :min="scaleMin"
+              :max="scaleMax"
+              :step="0.1"
+              disabled
+              style="width: 70px;"
+              :formatter="value => `${(value * 100).toFixed(0)}%`"
+              :parser="value => value.replace('%', '')"
+            />
+            <a-button type="text" icon="zoom-in" @click="changeScale(true)"></a-button>
+            <!-- 预览/打印 -->
+            <a-button-group>
+              <a-button type="primary" icon="eye" @click="preView">
+                预览
+              </a-button>
+              <a-button type="primary" @click="print">
+                直接打印
+                <a-icon type="printer"/>
+              </a-button>
+            </a-button-group>
+            <!-- 保存/清空 -->
+            <a-button-group>
+              <a-button type="primary" icon="save" @click="save">
+                保存
+              </a-button>
+              <a-popconfirm
+                title="是否确认清空?"
+                okType="danger"
+                okText="确定清空"
+                @confirm="clearPaper"
+              >
+                <a-icon slot="icon" type="question-circle-o" style="color: red"/>
+                <a-button type="danger">
+                  清空
+                  <a-icon type="close"/>
+                </a-button>
+              </a-popconfirm>
+            </a-button-group>
+            <json-view :template="template"/>
+          </a-space>
+          <!-- 多面板的容器 -->
+          <div class="hiprint-printPagination" style="margin-top: 14px;"></div>
+        </a-row>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[8,0]">
+      <a-col :span="4">
+        <a-card style="height: 100vh">
+          <a-row>
+            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="14">
+        <a-card class="card-design">
+          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
+        </a-card>
+      </a-col>
+      <a-col :span="6" class="params_setting_container">
+        <a-card>
+          <a-row class="hinnn-layout-sider">
+            <div id="PrintElementOptionSetting"></div>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+    <!-- 预览 -->
+    <print-preview ref="preView"/>
+  </a-card>
+</template>
+
+<script>
+
+import printPreview from './preview'
+import jsonView from '../json-view.vue'
+
+import {hiprint} from '../../index'
+import {providers, providerList} from './providers'
+import printData from './print-data'
+
+let hiprintTemplate;
+export default {
+  name: "printPanels",
+  components: {printPreview, jsonView},
+  data() {
+    return {
+      template: null,
+      // 模板选择
+      mode: 0,
+      modeList: [],
+      // 当前纸张
+      curPaper: {
+        type: 'other',
+        width: 220,
+        height: 80
+      },
+      // 纸张类型
+      paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+      scaleValue: 1,
+      scaleMax: 5,
+      scaleMin: 0.5,
+      // 自定义纸张
+      paperPopVisible: false,
+      paperWidth: '220',
+      paperHeight: '80',
+      lastjson: '',
+    }
+  },
+  computed: {
+    curPaperType() {
+      let type = 'other'
+      let types = this.paperTypes
+      for (const key in types) {
+        let item = types[key]
+        let {width, height} = this.curPaper
+        if (item.width === width && item.height === height) {
+          type = key
+        }
+      }
+      return type
+    }
+  },
+  mounted() {
+    this.init()
+    this.otherPaper()
+  },
+  methods: {
+    init() {
+      this.modeList = providerList
+      this.changeMode()
+      this.buildTemplate()
+    },
+    changeMode() {
+      let {mode} = this
+      let provider = providerList[mode]
+      hiprint.init({
+        providers: [...providers]
+      });
+      $('.hiprintEpContainer').empty()
+      hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
+
+    },
+    buildTemplate() {
+      $('#hiprint-printTemplate').empty()
+      let templates = this.$ls.get('KEY_TEMPLATES_PANELS', {})
+      let that = this;
+      this.template = hiprintTemplate = new hiprint.PrintTemplate({
+        template: templates,
+        settingContainer: '#PrintElementOptionSetting',
+        paginationContainer: '.hiprint-printPagination',
+        defaultPanelName: '默认面板名称',
+        onPanelAddClick: (panel, createPanel) => {
+          panel.name = '新面板' + (panel.index + 1);
+          that.$message.success('弹出个东西,让你们知道,在这里可以自定义面板名称');
+          that.$notification.success({
+            placement: 'topRight',
+            message: '弹出个东西,让你们知道,在这里可以自定义面板名称',
+            description: '自定义面板名称',
+          });
+          createPanel(panel);
+        },
+      });
+      hiprintTemplate.design('#hiprint-printTemplate', {grid: true});
+      // 获取当前放大比例, 当zoom时传true 才会有
+      this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
+    },
+    /**
+     * 设置纸张大小
+     * @param type [A3, A4, A5, B3, B4, B5, other]
+     * @param value {width,height} mm
+     */
+    setPaper(type, value) {
+      try {
+        if (Object.keys(this.paperTypes).includes(type)) {
+          this.curPaper = {type: type, width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        } else {
+          this.curPaper = {type: 'other', width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        }
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`)
+      }
+    },
+    changeScale(big) {
+      let scaleValue = this.scaleValue;
+      if (big) {
+        scaleValue += 0.1;
+        if (scaleValue > this.scaleMax) scaleValue = 5;
+      } else {
+        scaleValue -= 0.1;
+        if (scaleValue < this.scaleMin) scaleValue = 0.5;
+      }
+      if (hiprintTemplate) {
+        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
+        hiprintTemplate.zoom(scaleValue, true);
+        this.scaleValue = scaleValue;
+      }
+    },
+    otherPaper() {
+      let value = {}
+      value.width = this.paperWidth
+      value.height = this.paperHeight
+      this.paperPopVisible = false
+      this.setPaper('other', value)
+    },
+    preView() {
+      let {width} = this.curPaper
+      this.$refs.preView.show(hiprintTemplate, printData, width)
+    },
+    print() {
+      if (window.hiwebSocket.opened) {
+        const printerList = hiprintTemplate.getPrinterList();
+        console.log(printerList)
+        hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
+        return
+      }
+      this.$error({
+        title: "客户端未连接",
+        content: (h) => (
+          <div>
+            连接【{hiwebSocket.host}】失败！
+            <br />
+            请确保目标服务器已
+            <a
+              href="https://gitee.com/CcSimple/electron-hiprint/releases"
+              target="_blank"
+            >
+              下载
+            </a>
+            并
+            <a href="hiprint://" target="_blank">
+              运行
+            </a>
+            打印服务！
+          </div>
+        ),
+      });
+    },
+    save() {
+      let json = hiprintTemplate.getJson();
+      console.log(json);
+      this.$ls.set('KEY_TEMPLATES_PANELS', json)
+      this.$message.info('保存成功')
+    },
+    clearPaper() {
+      try {
+        hiprintTemplate.clear();
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// build 拖拽
+/deep/ .hiprint-printElement-type > li > ul > li > a {
+  padding: 4px 4px;
+  color: #1296db;
+  line-height: 1;
+  height: auto;
+  text-overflow: ellipsis;
+}
+
+// 默认图片
+/deep/ .hiprint-printElement-image-content {
+  img {
+    content: url("~@/assets/logo.png");
+  }
+}
+
+// 设计容器
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+</style>

src/views/printdesign/panels/preview.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="width+'mm'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content_custom"></div>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">打印预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content_custom').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/panels/print-data.js

@@ -0,0 +1,38 @@
+export default {
+  totalCap: '壹佰元整',
+  logo: 'https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60',
+  barcode: 'XS888888888',
+  qrcode: '0123456789',
+  table: [
+    {INDEX: '1', NAME: '测试商品01', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '2', NAME: '测试商品02', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '3', NAME: '测试商品03', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '4', NAME: '测试商品04', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '5', NAME: '测试商品05', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '6', NAME: '测试商品06', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '7', NAME: '测试商品07', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '8', NAME: '测试商品08', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '9', NAME: '测试商品09', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '10', NAME: '测试商品10', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '11', NAME: '测试商品11', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '12', NAME: '测试商品12', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '13', NAME: '测试商品13', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '14', NAME: '测试商品14', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '15', NAME: '测试商品15', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '16', NAME: '测试商品16', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '17', NAME: '测试商品17', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '18', NAME: '测试商品18', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '19', NAME: '测试商品19', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '20', NAME: '测试商品20', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '21', NAME: '测试商品21', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '22', NAME: '测试商品22', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '23', NAME: '测试商品23', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '24', NAME: '测试商品24', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '25', NAME: '测试商品25', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '26', NAME: '测试商品26', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '27', NAME: '测试商品27', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '28', NAME: '测试商品28', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '29', NAME: '测试商品29', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+    {INDEX: '30', NAME: '测试商品30', SL: 2, GG: '1*24g', TM: '2O22010100110', DJ: '6.8', JE: '13.6'},
+  ]
+};

src/views/printdesign/panels/providers.js

@@ -0,0 +1,429 @@
+/* eslint-disable */
+import {hiprint} from '../../index'
+
+// 自定义设计元素1
+export const panelsProvider1 = function (ops) {
+  var addElementTypes = function (context) {
+    context.removePrintElementTypes("panelsProvider1");
+    context.addPrintElementTypes(
+      "panelsProvider1",
+      [
+        new hiprint.PrintElementTypeGroup("平台", [
+          {
+            tid: 'panelsProvider1.header', title: '单据表头', data: '单据表头', type: 'text',
+            options: {
+              testData: '单据表头',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'panelsProvider1.type', title: '单据类型', data: '单据类型', type: 'text',
+            options: {
+              testData: '单据类型',
+              height: 16,
+              fontSize: 15,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'panelsProvider1.order', title: '订单编号', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'orderId',
+              testData: 'XS888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider1.date', title: '业务日期', data: '2020-01-01', type: 'text',
+            options: {
+              field: 'date',
+              testData: '2020-01-01',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider1.barcode', title: '条形码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'barcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "barcode"
+            }
+          },
+          {
+            tid: 'panelsProvider1.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'qrcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "qrcode"
+            }
+          },
+          {
+            tid: 'panelsProvider1.platform', title: '平台名称', data: '平台名称', type: 'text',
+            options: {
+              testData: '平台名称',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {tid: 'panelsProvider1.logo', title: 'Logo', data: '', type: 'image'},
+        ]),
+        new hiprint.PrintElementTypeGroup("库管", [
+          {
+            tid: 'panelsProvider1.creater', title: '制单人', data: '李四', type: 'text',
+            options: {
+              field: 'creater',
+              testData: '李四',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider1.printDate', title: '打印时间', data: '2022-01-01 09:00', type: 'text',
+            options: {
+              field: 'printDate',
+              testData: '2022-01-01 09:00',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider1.signer', title: '库管签字', data: '', type: 'text',
+            options: {
+              title: '库管签字：',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+        ]),
+        new hiprint.PrintElementTypeGroup("表格/其他", [
+          {
+            tid: 'panelsProvider1.table', title: '订单数据',
+            type: 'table',
+            options: {
+              field: 'table',
+              tableHeaderRepeat: 'first',
+              tableFooterRepeat: 'last',
+              fields: [
+                {text: '名称', field: 'NAME'},
+                {text: '数量', field: 'SL'},
+                {text: '规格', field: 'GG'},
+                {text: '条码', field: 'TM'},
+                {text: '单价', field: 'DJ'},
+                {text: '金额', field: 'JE'},
+              ],
+            },
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            isEnableEditField: true, //编辑字段
+            isEnableContextMenu: true, //开启右键菜单 默认true
+            isEnableInsertRow: true, //插入行
+            isEnableDeleteRow: true, //删除行
+            isEnableInsertColumn: true, //插入列
+            isEnableDeleteColumn: true, //删除列
+            isEnableMergeCell: true, //合并单元格
+            columns: [
+              [
+                {title: '名称', align: 'center', field: 'NAME', width: 150},
+                {title: '数量', align: 'center', field: 'SL', width: 80},
+                {title: '规格', align: 'center', field: 'GG', width: 80, checked: false},
+                {title: '条码', align: 'center', field: 'TM', width: 100, checked: false},
+                {title: '单价', align: 'center', field: 'DJ', width: 100},
+                {title: '金额', align: 'center', field: 'JE', width: 100, checked: false},
+              ],
+            ],
+            rowsColumnsMerge: function (data, col, index) {
+              // 返回一个数组,参数一为行（rowspan）合并数,参数二为列（colspan）合并数, 被合并的行或者列值设为0
+              if (index == 0) {
+                return [1, data.INDEX % 2 == 1 ? 2 : 1]
+              } else if (index > 0 && index < 2) {
+                return [data.INDEX % 2 == 1 ? 0 : 1, 1]
+              } else {
+                return [data.INDEX % 2 == 1 ? 2 : 0, 1]
+              }
+            },
+            footerFormatter: function (options, rows, data, currentPageGridRowsData) {
+              if (data && data['totalCap']) {
+                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
+              }
+              return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
+            },
+          },
+          {tid: 'panelsProvider1.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'},
+          {
+            tid: 'panelsProvider1.longText', title: '长文本', type: 'longText', options: {
+              field: 'test.longText',
+              width: 200,
+              testData: '长文本分页/不分页测试'
+            },
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: 'panelsProvider1.hline',
+            title: '横线',
+            type: 'hline'
+          },
+          {
+            tid: 'panelsProvider1.vline',
+            title: '竖线',
+            type: 'vline'
+          },
+          {
+            tid: 'panelsProvider1.rect',
+            title: '矩形',
+            type: 'rect'
+          },
+          {
+            tid: 'panelsProvider1.oval',
+            title: '椭圆',
+            type: 'oval'
+          }
+        ])
+      ]
+    );
+  };
+  return {
+    addElementTypes: addElementTypes
+  };
+};
+
+// 自定义设计元素2
+export const panelsProvider2 = function (ops) {
+  var addElementTypes = function (context) {
+    context.removePrintElementTypes("panelsProvider2");
+    context.addPrintElementTypes(
+      "panelsProvider2",
+      [
+        new hiprint.PrintElementTypeGroup("常规", [
+          {
+            tid: 'panelsProvider2.header', title: '单据表头', data: '单据表头', type: 'text',
+            options: {
+              testData: '单据表头',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'panelsProvider2.type', title: '单据类型', data: '单据类型', type: 'text',
+            options: {
+              testData: '单据类型',
+              height: 16,
+              fontSize: 15,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'panelsProvider2.order', title: '订单编号', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'orderId',
+              testData: 'XS888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider2.date', title: '业务日期', data: '2020-01-01', type: 'text',
+            options: {
+              field: 'date',
+              testData: '2020-01-01',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider2.barcode', title: '条形码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'barcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "barcode"
+            }
+          },
+          {
+            tid: 'panelsProvider2.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'qrcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "qrcode"
+            }
+          },
+          {
+            tid: 'panelsProvider2.platform', title: '平台名称', data: '平台名称', type: 'text',
+            options: {
+              testData: '平台名称',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {tid: 'panelsProvider2.image', title: 'Logo', data: '', type: 'image'},
+        ]),
+        new hiprint.PrintElementTypeGroup("客户", [
+          {
+            tid: 'panelsProvider2.khname', title: '客户名称', data: '高级客户', type: 'text',
+            options: {
+              field: 'name',
+              testData: '高级客户',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'panelsProvider2.tel', title: '客户电话', data: '18888888888', type: 'text',
+            options: {
+              field: 'tel',
+              testData: '18888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+        ]),
+        new hiprint.PrintElementTypeGroup("表格/其他", [
+          {
+            tid: 'panelsProvider2.table', title: '订单数据',
+            type: 'table',
+            options: {
+              field: 'table',
+              fields: [
+                {text: '名称', field: 'NAME'},
+                {text: '数量', field: 'SL'},
+                {text: '规格', field: 'GG'},
+                {text: '条码', field: 'TM'},
+                {text: '单价', field: 'DJ'},
+                {text: '金额', field: 'JE'},
+                {text: '备注', field: 'DETAIL'},
+              ],
+            },
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            columns: [
+              [
+                {title: '名称', align: 'center', field: 'NAME', width: 100},
+                {title: '数量', align: 'center', field: 'SL', width: 100},
+                {title: '条码', align: 'center', field: 'TM', width: 100},
+                {title: '规格', align: 'center', field: 'GG', width: 100},
+                {title: '单价', align: 'center', field: 'DJ', width: 100},
+                {title: '金额', align: 'center', field: 'JE', width: 100},
+                {title: '备注', align: 'center', field: 'DETAIL', width: 100},
+              ]
+            ],
+            footerFormatter: function (options, rows, data, currentPageGridRowsData) {
+              if (data && data['totalCap']) {
+                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
+              }
+              return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
+            },
+          },
+          {tid: 'panelsProvider2.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'},
+          {
+            tid: 'panelsProvider2.longText', title: '长文本', type: 'longText', options: {
+              field: 'test.longText',
+              width: 200,
+              testData: '长文本分页/不分页测试'
+            },
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: 'panelsProvider2.hline',
+            title: '横线',
+            type: 'hline'
+          },
+          {
+            tid: 'panelsProvider2.vline',
+            title: '竖线',
+            type: 'vline'
+          },
+          {
+            tid: 'panelsProvider2.rect',
+            title: '矩形',
+            type: 'rect'
+          },
+          {
+            tid: 'panelsProvider2.oval',
+            title: '椭圆',
+            type: 'oval'
+          }
+        ])
+      ]
+    );
+  };
+  return {
+    addElementTypes: addElementTypes
+  };
+};
+
+export const providers = [panelsProvider1(), panelsProvider2()];
+export const providerList = [{
+  name: '设计1',
+  type: 1,
+  value: 'panelsProvider1',
+}, {
+  name: '设计2',
+  type: 2,
+  value: 'panelsProvider2',
+}]

src/views/printdesign/tasks/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <a-card>
+    <a-row :gutter="[8,0]" style="margin-bottom: 10px">
+      <a-col :span="24">
+        <a-space>
+          <!-- 纸张设置 -->
+          <a-button-group>
+            <template v-for="(value,type) in paperTypes">
+              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
+                {{ type }}
+              </a-button>
+            </template>
+            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
+              <div slot="content">
+                <a-input-group compact style="margin: 10px 10px">
+                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
+                           placeholder="宽(mm)"/>
+                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
+                           placeholder="~" disabled
+                  />
+                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
+                           placeholder="高(mm)"/>
+                </a-input-group>
+                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
+              </div>
+              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
+            </a-popover>
+          </a-button-group>
+          <!-- 打印数量 -->
+          打印数量：
+          <a-slider v-model="count" style="width: 200px" :min="1" :max="10000"/>
+          <a-input-number v-model="count" :min="1" :max="10000" style="margin-left: 16px"/>
+          <!-- 预览/打印 -->
+          <a-button-group>
+            <a-button type="primary" icon="eye" @click="preView">
+              预览
+            </a-button>
+            <a-button type="primary" @click="print">
+              直接打印
+              <a-icon type="printer"/>
+            </a-button>
+          </a-button-group>
+          <!-- 保存/清空 -->
+          <a-button-group>
+            <a-button type="primary" icon="save" @click="save">
+              保存
+            </a-button>
+            <a-popconfirm
+              title="是否确认清空?"
+              okType="danger"
+              okText="确定清空"
+              @confirm="clearPaper"
+            >
+              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
+              <a-button type="danger">
+                清空
+                <a-icon type="close"/>
+              </a-button>
+            </a-popconfirm>
+          </a-button-group>
+          <json-view :template="template"/>
+        </a-space>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[8,0]">
+      <a-col :span="4">
+        <a-card style="height: 100vh">
+          <a-row>
+            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="14">
+        <a-card class="card-design">
+          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
+        </a-card>
+      </a-col>
+      <a-col :span="6" class="params_setting_container">
+        <a-card>
+          <a-row class="hinnn-layout-sider">
+            <div id="PrintElementOptionSetting"></div>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+    <!-- 预览 -->
+    <print-preview ref="preView"/>
+  </a-card>
+</template>
+
+<script>
+
+import printPreview from './preview'
+import jsonView from '../json-view.vue'
+
+import {hiprint} from '../../index'
+import TaskRunner from 'concurrent-tasks';
+import panel from './panel'
+import provider from './providers'
+import printData from './print-data'
+
+let hiprintTemplate;
+export default {
+  name: "printCustom",
+  components: {printPreview, jsonView},
+  data() {
+    return {
+      template: null,
+      // 打印数量
+      count: 1,
+      // 当前纸张
+      curPaper: {
+        type: 'other',
+        width: 80,
+        height: 60
+      },
+      // 纸张类型
+      paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+      // 自定义纸张
+      paperPopVisible: false,
+      paperWidth: '80',
+      paperHeight: '60',
+    }
+  },
+  computed: {
+    curPaperType() {
+      let type = 'other'
+      let types = this.paperTypes
+      for (const key in types) {
+        let item = types[key]
+        let {width, height} = this.curPaper
+        if (item.width === width && item.height === height) {
+          type = key
+        }
+      }
+      return type
+    }
+  },
+  mounted() {
+    this.init()
+    this.otherPaper()
+  },
+  methods: {
+    init() {
+      hiprint.init({
+        providers: [provider]
+      });
+      $('.hiprintEpContainer').empty()
+      hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'taskProviderModule');
+      $('#hiprint-printTemplate').empty()
+      let template = this.$ls.get('KEY_TEMPLATE_TASKS', panel)
+      this.template = hiprintTemplate = new hiprint.PrintTemplate({
+        template: template,
+        settingContainer: '#PrintElementOptionSetting',
+        paginationContainer: '.hiprint-printPagination'
+      });
+      hiprintTemplate.design('#hiprint-printTemplate');
+    },
+    /**
+     * 设置纸张大小
+     * @param type [A3, A4, A5, B3, B4, B5, other]
+     * @param value {width,height} mm
+     */
+    setPaper(type, value) {
+      try {
+        if (Object.keys(this.paperTypes).includes(type)) {
+          this.curPaper = {type: type, width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        } else {
+          this.curPaper = {type: 'other', width: value.width, height: value.height}
+          hiprintTemplate.setPaper(value.width, value.height)
+        }
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`)
+      }
+    },
+    otherPaper() {
+      let value = {}
+      value.width = this.paperWidth
+      value.height = this.paperHeight
+      this.paperPopVisible = false
+      this.setPaper('other', value)
+    },
+    preView() {
+      let {width} = this.curPaper
+      this.$refs.preView.show(hiprintTemplate, printData, width)
+    },
+    print() {
+      if (window.hiwebSocket.opened) {
+        const printerList = hiprintTemplate.getPrinterList();
+        console.log(printerList)
+        this.tasksPrint()
+        return
+      }
+      this.$error({
+        title: "客户端未连接",
+        content: (h) => (
+          <div>
+            连接【{hiwebSocket.host}】失败！
+            <br />
+            请确保目标服务器已
+            <a
+              href="https://gitee.com/CcSimple/electron-hiprint/releases"
+              target="_blank"
+            >
+              下载
+            </a>
+            并
+            <a href="hiprint://" target="_blank">
+              运行
+            </a>
+            打印服务！
+          </div>
+        ),
+      });
+    },
+    // 队列打印
+    tasksPrint() {
+      // 官网/文档： https://concurrent-tasks.js.org/
+      const runner = new TaskRunner();
+      runner.setConcurrency(1); // 同时执行数量
+      const task = []
+      let that = this
+      const tasksKey = `open${Date.now()}`;
+      for (let i = 1; i <= this.count; i++) {
+        // done -> 任务完成回调
+        let key = `task${i}`;
+        task.push(done => {
+          let printData = {count: i.toString()}
+          that.realPrint(runner, done, key, i, printData, tasksKey)
+        })
+      }
+      runner.addMultiple(task)
+      this.openNotification(runner, tasksKey)
+    },
+    realPrint(runner, done, key, i, printData, tasksKey) {
+      let that = this
+      that.$notification.info({
+        key: key,
+        placement: 'topRight',
+        duration: null,
+        message: `正在准备打印第 ${i} 张`,
+        description: '队列运行中...',
+      });
+      let template = that.$ls.get('KEY_TEMPLATE_TASKS', panel)
+      let hiprintTemplate = new hiprint.PrintTemplate({
+        template: template,
+      });
+      hiprintTemplate.print2(printData, {printer: '', title: key});
+      hiprintTemplate.on('printSuccess', function () {
+        let info = runner.tasks.list.length > 1 ? '准备打印下一张' : '已完成打印'
+        that.$notification.success({
+          key: key,
+          placement: 'topRight',
+          message: key + ' 打印成功',
+          description: info,
+        });
+        done()
+        if (!runner.isBusy()) {
+          that.$notification.close(tasksKey)
+        }
+      })
+      hiprintTemplate.on('printError', function () {
+        that.$notification.close(key)
+        done()
+        that.$message.error('打印失败，已加入重试队列中')
+        runner.add(that.realPrint(runner, done, key, i, printData))
+      })
+    },
+    openNotification(runner, tasksKey) {
+      let that = this;
+      that.$notification.open({
+        key: tasksKey,
+        message: '队列运行中...',
+        duration: 0,
+        placement: 'topLeft',
+        description: '点击关闭所有任务',
+        btn: h => {
+          return h(
+            'a-button',
+            {
+              props: {
+                type: 'danger',
+                size: 'small',
+              },
+              on: {
+                click: () => {
+                  that.$notification.close(tasksKey);
+                  // 详情请查阅文档
+                  runner.removeAll();
+                  that.$message.info('已移除所有任务');
+                },
+              },
+            },
+            '关闭任务',
+          );
+        },
+      });
+    },
+    save() {
+      let json = hiprintTemplate.getJson()
+      let template = this.$ls.get('KEY_TEMPLATE_TASKS', panel)
+      console.log(json)
+      console.log(JSON.stringify(json))
+      this.$ls.set('KEY_TEMPLATE_TASKS', template)
+      this.$message.info('保存成功')
+    },
+    clearPaper() {
+      try {
+        hiprintTemplate.clear();
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// build 拖拽
+/deep/ .hiprint-printElement-type > li > ul > li > a {
+  padding: 4px 4px;
+  color: #1296db;
+  line-height: 1;
+  height: auto;
+  text-overflow: ellipsis;
+}
+
+// 默认图片
+/deep/ .hiprint-printElement-image-content {
+  img {
+    content: url("~@/assets/logo.png");
+  }
+}
+
+// 设计容器
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+</style>

src/views/printdesign/tasks/panel.js

@@ -0,0 +1,50 @@
+export default {
+  "panels": [{
+    "index": 0,
+    "height": 60,
+    "width": 80,
+    "paperHeader": -15,
+    "paperFooter": 170.07874015748033,
+    "printElements": [{
+      "options": {
+        "left": 28.5,
+        "top": 12,
+        "height": 17,
+        "width": 120,
+        "testData": "单据表头",
+        "fontSize": 16.5,
+        "fontWeight": "700",
+        "textAlign": "center",
+        "hideTitle": true,
+        "title": "单据表头"
+      }, "printElementType": {"title": "单据表头", "type": "text"}
+    }, {
+      "options": {
+        "left": 28.5,
+        "top": 34.5,
+        "height": 120,
+        "width": 120,
+        "testData": "XS888888888",
+        "fontSize": 12,
+        "lineHeight": 18,
+        "fontWeight": "700",
+        "textAlign": "left",
+        "textType": "qrcode",
+        "title": "二维码"
+      }, "printElementType": {"title": "二维码", "type": "text"}
+    }, {
+      "options": {
+        "left": 157.5,
+        "top": 15,
+        "height": 9.75,
+        "width": 57,
+        "title": "第",
+        "field": "count",
+        "testData": "1"
+      }, "printElementType": {"title": "文本", "type": "text"}
+    }],
+    "paperNumberLeft": 196,
+    "paperNumberTop": 148,
+    "paperNumberDisabled": true
+  }]
+}

src/views/printdesign/tasks/preview.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="width+'mm'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content_tasks"></div>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">打印预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content_tasks').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/tasks/print-data.js

@@ -0,0 +1,3 @@
+export default {
+  count: '1',
+};

src/views/printdesign/tasks/providers.js

@@ -0,0 +1,209 @@
+/* eslint-disable */
+import {hiprint} from '../../index'
+
+// 自定义设计元素1
+export const aProvider = function (ops) {
+  var addElementTypes = function (context) {
+    context.removePrintElementTypes("taskProviderModule");
+    context.addPrintElementTypes(
+      "taskProviderModule",
+      [
+        new hiprint.PrintElementTypeGroup("平台", [
+          {
+            tid: 'taskProviderModule.header', title: '单据表头', data: '单据表头', type: 'text',
+            options: {
+              testData: '单据表头',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'taskProviderModule.type', title: '单据类型', data: '单据类型', type: 'text',
+            options: {
+              testData: '单据类型',
+              height: 16,
+              fontSize: 15,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {
+            tid: 'taskProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'orderId',
+              testData: 'XS888888888',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'taskProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text',
+            options: {
+              field: 'date',
+              testData: '2020-01-01',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'taskProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'barcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "barcode"
+            }
+          },
+          {
+            tid: 'taskProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
+            options: {
+              field: 'qrcode',
+              testData: 'XS888888888',
+              height: 32,
+              fontSize: 12,
+              lineHeight: 18,
+              textType: "qrcode"
+            }
+          },
+          {
+            tid: 'taskProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text',
+            options: {
+              testData: '平台名称',
+              height: 17,
+              fontSize: 16.5,
+              fontWeight: "700",
+              textAlign: "center",
+              hideTitle: true
+            }
+          },
+          {tid: 'taskProviderModule.logo', title: 'Logo', data: '', type: 'image'},
+        ]),
+        new hiprint.PrintElementTypeGroup("库管", [
+          {
+            tid: 'taskProviderModule.creater', title: '制单人', data: '李四', type: 'text',
+            options: {
+              field: 'creater',
+              testData: '李四',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'taskProviderModule.printDate', title: '打印时间', data: '2022-01-01 09:00', type: 'text',
+            options: {
+              field: 'printDate',
+              testData: '2022-01-01 09:00',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+          {
+            tid: 'taskProviderModule.signer', title: '库管签字', data: '', type: 'text',
+            options: {
+              title: '库管签字：',
+              height: 16,
+              fontSize: 6.75,
+              fontWeight: "700",
+              textAlign: "left",
+              textContentVerticalAlign: "middle"
+            }
+          },
+        ]),
+        new hiprint.PrintElementTypeGroup("表格/其他", [
+          {
+            tid: 'taskProviderModule.table', title: '订单数据',
+            type: 'table',
+            options: {
+              field: 'table',
+              tableHeaderRepeat: 'first',
+              tableFooterRepeat: 'last',
+              fields: [
+                {text: '名称', field: 'NAME'},
+                {text: '数量', field: 'SL'},
+                {text: '规格', field: 'GG'},
+                {text: '条码', field: 'TM'},
+                {text: '单价', field: 'DJ'},
+                {text: '金额', field: 'JE'},
+              ],
+            },
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            isEnableEditField: true, //编辑字段
+            isEnableContextMenu: true, //开启右键菜单 默认true
+            isEnableInsertRow: true, //插入行
+            isEnableDeleteRow: true, //删除行
+            isEnableInsertColumn: true, //插入列
+            isEnableDeleteColumn: true, //删除列
+            isEnableMergeCell: true, //合并单元格
+            columns: [
+              [
+                {title: '名称', align: 'center', field: 'NAME', width: 150},
+                {title: '数量', align: 'center', field: 'SL', width: 80},
+                {title: '规格', align: 'center', field: 'GG', width: 80, checked: false},
+                {title: '条码', align: 'center', field: 'TM', width: 100, checked: false},
+                {title: '单价', align: 'center', field: 'DJ', width: 100},
+                {title: '金额', align: 'center', field: 'JE', width: 100, checked: false},
+              ],
+            ],
+            footerFormatter: function (options, rows, data, currentPageGridRowsData) {
+              if (data && data['totalCap']) {
+                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
+              }
+              return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
+            },
+          },
+          {tid: 'taskProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'}
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: 'taskProviderModule.hline',
+            title: '横线',
+            type: 'hline'
+          },
+          {
+            tid: 'taskProviderModule.vline',
+            title: '竖线',
+            type: 'vline'
+          },
+          {
+            tid: 'taskProviderModule.rect',
+            title: '矩形',
+            type: 'rect'
+          },
+          {
+            tid: 'taskProviderModule.oval',
+            title: '椭圆',
+            type: 'oval'
+          }
+        ])
+      ]
+    );
+  };
+  return {
+    addElementTypes: addElementTypes
+  };
+};
+
+export default aProvider()

src/views/printdesign/templates/files.js

@@ -0,0 +1,11 @@
+import {preview} from "./template-files/template1";
+
+const files = require.context('./template-files', false, /\.js$/)
+
+const templates = {}
+files.keys().forEach(key => {
+  let templateKey = key.replace(/\.\//, '').replace(/(\.js)/, '');
+  templates[templateKey] = Object.assign(templates[templateKey] || {}, files(key).default)
+})
+
+export default templates

src/views/printdesign/templates/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <a-card>
+    <div class="templates">
+      <template v-for="(template,key) in templates">
+        <div class="item-box" :key="key" @click="show(template)">
+          <a-popover v-if="template.preview">
+            <template #content>
+              <img style="cursor: pointer" :src="template.preview" @click="show(template)"/>
+            </template>
+            <img class="preview" :src="template.preview"/>
+          </a-popover>
+          <div v-else class="preview">暂无预览图</div>
+          <div class="name pd">{{ template.name }}</div>
+          <div class="desc pd">{{ template.desc }}</div>
+          <div class="author pd" @click.stop="">
+            <a :href="template.link" target="_blank">{{ template.author }}</a>
+          </div>
+        </div>
+      </template>
+    </div>
+    <template-preview ref="preview"/>
+  </a-card>
+</template>
+
+<script>
+import templates from './files'
+import templatePreview from './preview'
+import printData from "../design/print-data";
+
+export default {
+  name: "templates",
+  components: {templatePreview},
+  data() {
+    return {
+      templates
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    show(template) {
+      this.$refs.preview.show(template)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.templates {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+}
+
+.item-box {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 10px #ccc;
+  border-radius: 10px;
+  margin: 0 10px 10px 0;
+
+  img {
+    object-fit: cover;
+  }
+
+  .preview {
+    height: 200px;
+    width: 200px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  .pd {
+    padding: 4px 6px;
+  }
+
+  .name {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .desc {
+    font-size: 12px;
+    color: #999;
+  }
+
+  .author {
+    text-align: right;
+  }
+}
+
+.item-box:hover {
+  box-shadow: 0 0 10px #999;
+  cursor: pointer;
+}
+</style>

src/views/printdesign/templates/preview.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="80+'vw'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div v-show="isMultiPanel" id="template-preview-printPagination" style="margin: 14px 0 0 10px;"></div>
+      <a-row>
+        <a-col :span="18">
+          <a-card class="card-design">
+            <div id="template-preview"></div>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card>
+            <div id="template-preview-setting"></div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">模板预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+        <a-button type="primary" icon="printer" @click.stop="print2">直接打印</a-button>
+        <json-view :template="hiprintTemplate"/>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import {hiprint} from '../../index'
+import jsonView from '../json-view.vue'
+import printPreview from "../custom/preview.vue";
+import panel from "../design/panel";
+import printData from "../design/print-data";
+
+let hiprintTemplate;
+export default {
+  name: "templatePreview",
+  components: {printPreview, jsonView},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      template: null,
+      isMultiPanel: true,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      name: '名称',
+      json: {},
+      printData: {},
+      // 扩展 css
+      extendCss: ''
+    }
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+      $("link[media=print]").empty();
+    },
+    show(template) {
+      let that = this;
+      this.visible = true
+      this.spinning = true
+      this.template = template
+      this.name = template.name
+      this.json = template.json
+      this.printData = template.printData
+      this.extendCss = template.extendCss || "";
+      if (this.extendCss.length > 1) {
+        $(this.extendCss).appendTo($("link[media=print]"));
+      }
+      let isMounted = $('#template-preview').length <= 0 || $('#template-preview-setting').length <= 0;
+      do {
+        setTimeout(() => {
+          $('#template-preview').empty()
+          that.hiprintTemplate = hiprintTemplate = new hiprint.PrintTemplate({
+            template: template.json,
+            settingContainer: '#template-preview-setting',
+            paginationContainer: '#template-preview-printPagination'
+          })
+          hiprintTemplate.design($('#template-preview'))
+          that.isMultiPanel = template.json.panels.length > 1
+          console.log('isMultiPanel', that.isMultiPanel)
+          that.spinning = false
+        }, 200)
+        return
+      } while (isMounted)
+    },
+    print() {
+      let that = this;
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          this.waitShowPrinter = false
+        },
+        styleHandler: () => {
+          return that.extendCss
+        }
+      })
+    },
+    toPdf() {
+      let that = this;
+      this.hiprintTemplate.toPdf(this.printData, this.name, {
+        styleHandler: () => {
+          return that.extendCss
+        }
+      });
+    },
+    print2() {
+      if (hiprint.hiwebSocket.opened) {
+        let that = this;
+        this.hiprintTemplate.print2(this.printData, {
+          printer: '', title: this.name,
+          styleHandler: () => {
+            return that.extendCss
+          }
+        })
+      } else
+        this.$message.error('请先连接直接打印客户端')
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printdesign/templates/template-files/template2.js

@@ -0,0 +1,286 @@
+/*
+ * @Author: 54xavier
+ * @LastEditors: 54xavier
+ * @Date: 2023-02-28 14:00:03
+ * @LastEditTime: 2023-02-28 14:18:14
+ */
+export const name = '一行多组';
+export const desc = '条码、标签A4纸铺满打印demo'
+export const author = '54xavier'
+export const link = "https://ccsimple.gitee.io/vue-plugin-hiprint/";
+// url 或者 base64 或者 require('../../../assets/logo.png')
+export const preview = 'https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template2.png';
+export const printData = {
+	table: [
+		{
+			name: "Apple iPhone 13 Pro Max",
+			type: "Mobile Phone",
+			barcode: "190199829853",
+		},
+		{
+			name: "Samsung Galaxy S21 Ultra",
+			type: "Mobile Phone",
+			barcode: "8801643871977",
+		},
+		{
+			name: "Sony WH-1000XM4 Wireless Headphones",
+			type: "Headphones",
+			barcode: "027242919905",
+		},
+		{
+			name: "Lenovo ThinkPad X1 Carbon Gen 9",
+			type: "Laptop",
+			barcode: "195235458521",
+		},
+		{
+			name: "Apple iPad Air",
+			type: "Tablet",
+			barcode: "190199855659",
+		},
+		{
+			name: "Dell XPS 13",
+			type: "Laptop",
+			barcode: "884116382030",
+		},
+		{
+			name: "Amazon Echo Dot (3rd Gen)",
+			type: "Smart Speaker",
+			barcode: "841667155635",
+		},
+		{
+			name: "Google Nest Hub",
+			type: "Smart Display",
+			barcode: "193575001505",
+		},
+		{
+			name: "Samsung QN90A Neo QLED TV",
+			type: "Television",
+			barcode: "887276496535",
+		},
+		{
+			name: "LG CX OLED TV",
+			type: "Television",
+			barcode: "719192633020",
+		},
+		{
+			name: "PlayStation 5",
+			type: "Gaming Console",
+			barcode: "711719541042",
+		},
+		{
+			name: "Xbox Series X",
+			type: "Gaming Console",
+			barcode: "889842687482",
+		},
+		{
+			name: "Apple Watch Series 7",
+			type: "Smartwatch",
+			barcode: "190199874322",
+		},
+		{
+			name: "Fitbit Charge 5",
+			type: "Fitness Tracker",
+			barcode: "811138039822",
+		},
+		{
+			name: "Bose QuietComfort 35 II",
+			type: "Headphones",
+			barcode: "017817770613",
+		},
+		{
+			name: "Logitech MX Master 3",
+			type: "Computer Mouse",
+			barcode: "097855149969",
+		},
+		{
+			name: "Nintendo Switch",
+			type: "Gaming Console",
+			barcode: "04549688180",
+		},
+		{
+			name: "HP OfficeJet Pro 9015e All-in-One Printer",
+			type: "Printer",
+			barcode: "194721013844",
+		},
+		{
+			name: "Canon EOS R5",
+			type: "Mirrorless Camera",
+			barcode: "013803338279",
+		},
+		{
+			name: "Sony WH-1000XM3 Wireless Headphones",
+			type: "Headphones",
+			barcode: "027242908676",
+		},
+		{
+			name: "Bose SoundLink Revolve+",
+			type: "Bluetooth Speaker",
+			barcode: "017817744171",
+		},
+		{
+			name: "Nest Learning Thermostat",
+			type: "Smart Thermostat",
+			barcode: "813917021952",
+		},
+		{
+			name: "LG C1 OLED TV",
+			type: "Television",
+			barcode: "719192641615",
+		},
+		{
+			name: "Samsung Galaxy Tab S7",
+			type: "Tablet",
+			barcode: "887276447402",
+		},
+		{
+			name: "Dyson V11 Absolute Cordless Vacuum",
+			type: "Vacuum Cleaner",
+			barcode: "885609020334",
+		},
+		{
+			name: "GoPro HERO10 Black",
+			type: "Action Camera",
+			barcode: "818279029168",
+		},
+		{
+			name: "Microsoft Surface Laptop 4",
+			type: "Laptop",
+			barcode: "889842724245",
+		},
+		{
+			name: "Apple AirPods Pro",
+			type: "Wireless Earbuds",
+			barcode: "190199246850",
+		},
+		{
+			name: "Sony A7S III",
+			type: "Mirrorless Camera",
+			barcode: "027242919925",
+		},
+		{
+			name: "Samsung Galaxy Watch 4",
+			type: "Smartwatch",
+			barcode: "887276531088",
+		},
+		{
+			name: "Bose SoundSport Wireless Earbuds",
+			type: "Wireless Earbuds",
+			barcode: "017817731355",
+		},
+		{
+			name: "NVIDIA GeForce RTX 3080",
+			type: "Graphics Card",
+			barcode: "812674023590",
+		},
+		{
+			name: "Sony WH-CH710N Wireless Headphones",
+			type: "Headphones",
+			barcode: "027242917711",
+		},
+		{
+			name: "Bose QuietComfort Earbuds",
+			type: "Wireless Earbuds",
+			barcode: "017817788293",
+		},
+		{
+			name: "Apple MacBook Pro 16-inch",
+			type: "Laptop",
+			barcode: "190199397010",
+		},
+		{
+			name: "Samsung Galaxy Note 20 Ultra",
+			type: "Mobile Phone",
+			barcode: "887276395219",
+		},
+		{
+			name: "Google Pixel 6",
+			type: "Mobile Phone",
+			barcode: "842776101253",
+		},
+		{
+			name: "Microsoft Xbox Wireless Controller",
+			type: "Gaming Controller",
+			barcode: "889842493038",
+		},
+		{
+			name: "Logitech G502 HERO Gaming Mouse",
+			type: "Gaming Mouse",
+			barcode: "097855135391",
+		},
+		{
+			name: "Sony WF-1000XM4 Wireless Earbuds",
+			type: "Wireless Earbuds",
+			barcode: "027242920023",
+		},
+	],
+};
+export const json = {
+	panels: [
+		{
+			index: 0,
+			height: 297,
+			width: 210,
+			paperHeader: 0,
+			paperFooter: 842,
+			printElements: [
+				{
+					options: {
+						left: 20,
+						top: 20,
+						height: 56,
+						width: 555,
+						field: "table",
+						tableHeaderRepeat: "none",
+						tableBorder: "noBorder",
+						tableBodyRowBorder: "noBorder",
+						tableBodyCellBorder: "noBorder",
+						gridColumns: 2,
+						gridColumnsGutter: 3,
+						fields: [
+							{
+								text: "商品名称",
+								field: "name",
+							},
+							{
+								text: "商品编码",
+								field: "code",
+							},
+						],
+						columns: [
+							[
+								{
+									title: "商品名称",
+									field: "name",
+									checked: true,
+									renderFormatter:
+										"function(value,row,index,options){return `商品名：${row.name || '测试商品名'}<br>条码：${row.barcode || '123456'}`}",
+								},
+								{
+									title: "商品条码",
+									field: "barcode",
+									checked: true,
+									tableTextType: "barcode",
+								},
+							],
+						],
+					},
+					printElementType: {
+						title: "表格",
+						type: "table",
+					},
+				},
+			],
+			paperNumberLeft: 565.5,
+			paperNumberTop: 819,
+		},
+	],
+};
+export default {
+  preview: preview,
+  name: name,
+  desc: desc,
+  author: author,
+  link: link,
+  printData: printData,
+  json: json
+}

src/views/printdesign/templates/template-files/template5.js

@@ -0,0 +1,180 @@
+/*
+ * @Author: 54xavier
+ * @LastEditors: admin@54xavier.cn
+ * @Date: 2023-02-28 14:00:03
+ * @LastEditTime: 2023-08-08 19:33:15
+ */
+export const name = "DM码实现";
+export const desc = "通过HTML元素实现DM码";
+export const author = "54xavier";
+export const link = "https://ccsimple.gitee.io/vue-plugin-hiprint/";
+// url 或者 base64 或者 require('../../../assets/logo.png')
+export const preview =
+  "https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template5.png";
+export const printData = {
+  DMCode1: "123456",
+  DMCode2: "234567",
+};
+export const json = {
+  panels: [
+    {
+      index: 0,
+      name: 1,
+      height: 297,
+      width: 210,
+      paperHeader: 0,
+      paperFooter: 842,
+      printElements: [
+        {
+          options: {
+            left: 0,
+            top: 0,
+            height: 1,
+            width: 1,
+            formatter: `function(t, e, printData) {
+                var script = document.createElement("script");
+                script.setAttribute("type", "text/javascript");
+                script.setAttribute("src", "https://datalog.github.io/demo/datamatrix-svg/datamatrix.min.js");
+                return script;
+            }`,
+          },
+          printElementType: {
+            // 此元素为 DATAMatrix 依赖，此方法仅浏览器打印(print)生效，print2可能会无法加载依赖，需要手动在electron-hiprint项目中引入依赖
+            // 如果不使用 print2 可将此依赖全局添加到你自己项目中，只需设计、预览时能加载到此依赖即可
+            title: "DATAMatrix依赖",
+            type: "html",
+          },
+        },
+        {
+          options: {
+            left: 0,
+            top: 0,
+            height: 1,
+            width: 1,
+            formatter: `function(t, e, printData) {
+                var script = document.createElement("script");
+                script.setAttribute("type", "text/javascript");
+                script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/4.0.0/bwip-js-min.js");
+                return script;
+            }`,
+          },
+          printElementType: {
+            // 此元素为 bwip-js 依赖，此方法仅浏览器打印(print)生效，print2可能会无法加载依赖，需要手动在electron-hiprint项目中引入依赖
+            // 如果不使用 print2 可将此依赖全局添加到你自己项目中，只需设计、预览时能加载到此依赖即可
+            title: "bwip-js依赖",
+            type: "html",
+          },
+        },
+        {
+          options: {
+            left: 12,
+            top: 12,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+              if (window.DATAMatrix) {
+                var svgNode = DATAMatrix({msg: printData?.DMCode1 || "testData", dim: 267});
+                return svgNode;
+              } else {
+                return "<div style='width: 267px;height: 267px;border: 1px solid;'>点击打印预览查看</div>";
+              }
+            }`,
+            coordinateSync: false,
+            widthHeightSync: false,
+          },
+          printElementType: { title: "html", type: "html" },
+        },
+        {
+          options: {
+            left: 230,
+            top: 12,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+              if (window.bwipjs) {
+                var canvas = document.createElement("canvas");
+                var _bwip = bwipjs.toCanvas(canvas, {
+                  bcid: "datamatrix",
+                  text: printData?.DMCode2 || "testData",
+                  scale: 3,
+                  width: 30,
+                  height: 30,
+                });
+                return \`<img src="\${_bwip.toDataURL()}" />\`;
+              } else {
+                return "<div style='width: 267px;height: 267px;border: 1px solid;'>点击打印预览查看</div>";
+              }
+            }`,
+            right: 566.24609375,
+            bottom: 221.24609375,
+            vCenter: 466.24609375,
+            hCenter: 121.24609375,
+            coordinateSync: false,
+            widthHeightSync: false,
+          },
+          printElementType: { title: "html", type: "html" },
+        },
+        {
+          options: {
+            left: 12,
+            top: 212,
+            height: 12,
+            width: 200,
+            title: "datamatrix-svg",
+            textAlign: "center",
+            right: 119.75,
+            bottom: 294.24609375,
+            vCenter: 82.75,
+            hCenter: 288.24609375,
+            coordinateSync: false,
+            widthHeightSync: false,
+            qrCodeLevel: 0,
+          },
+          printElementType: { title: "自定义文本", type: "text" },
+        },
+        {
+          options: {
+            left: 230,
+            top: 212,
+            height: 12,
+            width: 200,
+            title: "bwip-js",
+            textAlign: "center",
+            right: 494,
+            bottom: 327.24609375,
+            vCenter: 457,
+            hCenter: 321.24609375,
+            coordinateSync: false,
+            widthHeightSync: false,
+            qrCodeLevel: 0,
+          },
+          printElementType: { title: "自定义文本", type: "text" },
+        },
+        {
+          options: {
+            left: 12,
+            top: 230,
+            height: 12,
+            width: 418,
+            title:
+              "说明：此处模版以不可见 html 元素加载 datamatrix-svg 及 bwip-js ，故第一次打开无法显示预览，但后续的 print api 能够正常显示，你可以在你的项目中全局加载所需依赖，保证设计、预览时能加载到，即可删除用于引入依赖的html元素。使用 print2 需要在 electron-hiprint 项目渲染层中添加该依赖，否则客户端首次打印都无法正常渲染对应的元素",
+          },
+          printElementType: { title: "说明", type: "text" },
+        },
+      ],
+      paperNumberLeft: 565.5,
+      paperNumberTop: 819,
+      paperNumberContinue: true,
+      watermarkOptions: {},
+    },
+  ],
+};
+export default {
+  preview: preview,
+  name: name,
+  desc: desc,
+  author: author,
+  link: link,
+  printData: printData,
+  json: json,
+};

src/views/printdesign/templates/template-files/template6.js

@@ -0,0 +1,223 @@
+/*
+ * @Author: 54xavier
+ * @LastEditors: admin@54xavier.cn
+ * @Date: 2023-02-28 14:00:03
+ * @LastEditTime: 2023-08-08 19:32:55
+ */
+export const name = "Echarts实现";
+export const desc = "通过HTML元素实现Echarts-svg";
+export const author = "54xavier";
+export const link = "https://ccsimple.gitee.io/vue-plugin-hiprint/";
+// url 或者 base64 或者 require('../../../assets/logo.png')
+export const preview =
+  "https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template6.png";
+function getRandomInt({ min = 10, max = 200 }) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+export const printData = {
+  lineData: Array.from(new Array(7), () => getRandomInt({})),
+  barData: Array.from(new Array(7), () => getRandomInt({})),
+  pieData: Array.from(new Array(5), (_, i) => ({
+    value: getRandomInt({}),
+    name: `系列${i}`,
+  })),
+};
+export const json = {
+  panels: [
+    {
+      index: 0,
+      name: 1,
+      height: 297,
+      width: 210,
+      paperHeader: 0,
+      paperFooter: 842,
+      printElements: [
+        {
+          options: {
+            left: 0,
+            top: 0,
+            height: 1,
+            width: 1,
+            formatter: `function(t, e, printData) {
+                var script = document.createElement("script");
+                script.setAttribute("type", "text/javascript");
+                script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js");
+                return script;
+            }`,
+          },
+          printElementType: {
+            // 此元素为 Echarts 依赖，此方法仅浏览器打印(print)生效，print2可能会无法加载依赖，需要手动在electron-hiprint项目中引入依赖
+            // 如果不使用 print2 可将此依赖全局添加到你自己项目中，只需设计、预览时能加载到此依赖即可
+            title: "Echarts依赖",
+            type: "html",
+          },
+        },
+        {
+          options: {
+            left: 12,
+            top: 12,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+                if (window.echarts) {
+                    var echartDom = document.createElement("div");
+                    echartDom.style.width = "267px";
+                    echartDom.style.height = "267px";
+                    var echartInstance = echarts.init(echartDom,null,{renderer: "svg"})
+                    echartInstance.setOption({
+                        animation: false,
+                        grid: {
+                            top: 10,
+                            right: 20,
+                            bottom: 30,
+                            left: 36,
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        },
+                        yAxis: {
+                            type: 'value'
+                        },
+                        series: [
+                            {
+                                data: printData?.lineData || [150, 230, 224, 218, 135, 147, 260],
+                                type: 'line'
+                            }
+                        ]
+                    })
+                    return echartDom;
+                } else {
+                    return '<div style="width: 267px;height: 267px; border: 1px solid;">点击打印预览查看</div>'
+                }
+            }`,
+          },
+          printElementType: { title: "html", type: "html" },
+        },
+        {
+          options: {
+            left: 230,
+            top: 12,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+                  if (window.echarts) {
+                      var echartDom = document.createElement("div");
+                      echartDom.style.width = "267px";
+                      echartDom.style.height = "267px";
+                      var echartInstance = echarts.init(echartDom,null,{renderer: "svg"})
+                      echartInstance.setOption({
+                          animation: false,
+                          grid: {
+                              top: 10,
+                              right: 20,
+                              bottom: 30,
+                              left: 36,
+                          },
+                          xAxis: {
+                              type: 'category',
+                              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                          },
+                          yAxis: {
+                              type: 'value'
+                          },
+                          series: [
+                              {
+                                  data: printData?.barData || [150, 230, 224, 218, 135, 147, 260],
+                                  type: 'bar'
+                              }
+                          ]
+                      })
+                      return echartDom;
+                  } else {
+                      return '<div style="width: 267px;height: 267px; border: 1px solid;">点击打印预览查看</div>'
+                  }
+                }`,
+          },
+          printElementType: { title: "html", type: "html" },
+        },
+        {
+          options: {
+            left: 12,
+            top: 230,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+                  if (window.echarts) {
+                      var echartDom = document.createElement("div");
+                      echartDom.style.width = "267px";
+                      echartDom.style.height = "267px";
+                      var echartInstance = echarts.init(echartDom,null,{renderer: "svg"})
+                      echartInstance.setOption({
+                          animation: false,
+                          series: [
+                              {
+                                  name: 'Access From',
+                                  type: 'pie',
+                                  radius: ['40%', '70%'],
+                                  avoidLabelOverlap: false,
+                                  itemStyle: {
+                                      borderRadius: 10,
+                                      borderColor: '#fff',
+                                      borderWidth: 2
+                                  },
+                                  label: {
+                                      show: false,
+                                      position: 'center'
+                                  },
+                                  emphasis: {
+                                      label: {
+                                          show: true,
+                                          fontSize: 40,
+                                          fontWeight: 'bold'
+                                      }
+                                  },
+                                  labelLine: {
+                                      show: false
+                                  },
+                                  data: printData?.pieData || [
+                                      { value: 1048, name: 'Search Engine' },
+                                      { value: 735, name: 'Direct' },
+                                      { value: 580, name: 'Email' },
+                                      { value: 484, name: 'Union Ads' },
+                                      { value: 300, name: 'Video Ads' }
+                                  ]
+                              }
+                          ]
+                        })
+                      return echartDom;
+                  } else {
+                      return '<div style="width: 267px;height: 267px; border: 1px solid;">点击打印预览查看</div>'
+                  }
+                }`,
+          },
+          printElementType: { title: "html", type: "html" },
+        },
+        {
+          options: {
+            left: 12,
+            top: 460,
+            height: 12,
+            width: 418,
+            title:
+              "说明：此处模版以一个不可见 html 元素加载 echarts ，故第一次打开无法显示预览，但后续的 print api 能够正常显示，你可以在你的项目中全局加载 echarts 依赖，保证设计、预览时能加载到 echarts 依赖，即可删除用于引入依赖的html元素。使用 print2 需要在 electron-hiprint 项目渲染层中添加该依赖，否则客户端首次打印都无法正常渲染 echarts",
+          },
+          printElementType: { title: "说明", type: "text" },
+        },
+      ],
+      paperNumberLeft: 565.5,
+      paperNumberTop: 819,
+      paperNumberContinue: true,
+      watermarkOptions: {},
+    },
+  ],
+};
+export default {
+  preview: preview,
+  name: name,
+  desc: desc,
+  author: author,
+  link: link,
+  printData: printData,
+  json: json,
+};

src/views/printdesign/templates/templatesindex.vue

@@ -0,0 +1,179 @@
+<!--
+ * @Description: 
+ * @Author: gcz
+ * @Date: 2024-01-10 16:31:18
+ * @LastEditors: gcz
+ * @LastEditTime: 2024-01-10 17:25:54
+ * @FilePath: \great_webui\src\views\printdesign\templates\templatesindex.vue
+ * @Copyright: Copyright (c) 2016~2024 by gcz, All Rights Reserved. 
+-->
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="模板名称">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入模板名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="退款状态">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="退款状态"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in statusList"
+              :key="dict.id"
+              :label="dict.name"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+  
+      <el-row :gutter="10" class="mb8">
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+  
+      <el-table ref="tables" v-loading="loading" :data="dataList" border>
+        <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
+        <el-table-column label="模板ID" align="center" prop="id" />
+        <el-table-column label="模板名称" align="center" prop="name" />
+        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="openDetails(scope.row)"
+              v-hasPermi="['printdesign:printdesign:details']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="delTemplate(scope.row)"
+              v-hasPermi="['printdesign:printdesign:del']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+  
+    </div>
+  </template>
+  
+  <script>
+  
+  import { pageList,deleteById } from '@/api/printdesign/printdesign'
+  export default {
+    name: "templates",
+    dicts: [],
+    components: { },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 用户表格数据
+        dataList: null,
+        // 弹出层标题
+        title: "",
+  
+        // 是否显示弹出层
+        open: false,
+        // 日期范围
+        dateRange: [],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        pageList(this.addDateRange(this.queryParams, this.dateRange))
+        .then(response => {
+            this.dataList = response.data.rows;
+            this.total = response.data.total;
+            this.loading = false;
+          }
+        );
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.dateRange = [];
+        this.$set(this.queryParams, 'name', '');
+        this.queryParams.pageNum = 1;
+        this.handleQuery();
+      },
+      /** 详情按钮操作 */
+      openDetails(row) {
+        this.$router.push({
+          path: '/printdesign/printdesign',
+          query: {
+            id: row.id
+          }
+        });
+      },
+      delTemplate(row) {
+        this.$confirm('确认删除该打印模板吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.loading = true;
+          deleteById(row.id).then(res => {
+            this.loading = false;
+            if (res.code === 200) {}
+            this.getList();
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        })
+    }
+  }
+  };
+  </script>
+  

vue.config.js

@@ -11,6 +11,8 @@ const name = process.env.VUE_APP_TITLE || '一码游管理系统' // 网页标
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
+const webpack = require('webpack');
+
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -59,6 +61,7 @@ module.exports = {
       }
     },
     plugins: [
+      
       // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
       new CompressionPlugin({
         cache: false,                   // 不启用文件缓存
@@ -66,7 +69,13 @@ module.exports = {
         filename: '[path].gz[query]',   // 压缩后的文件名
         algorithm: 'gzip',              // 使用gzip压缩
         minRatio: 0.8                   // 压缩率小于1才会压缩
-      })
+      }),
+      // 全局 jQuery
+      new webpack.ProvidePlugin({
+        jQuery: "jquery",
+        $: "jquery"
+      }),
+      
     ],
   },
   chainWebpack(config) {