yh-hiprint 2.4.0 → 2.4.2

package/HiprintDesigner.vue

@@ -842,8 +842,11 @@ function init() {
       fontList: [
         {title: '微软雅黑', value: 'Microsoft YaHei'},
         {title: '黑体', value: 'STHeitiSC-Light'},
+        {title: '思源黑体', value: 'SourceHanSansCN-Normal'},
         {title: '宋体', value: 'SimSun'},
+        {title: '华为楷体', value: 'STKaiti'},
         {title: 'cursive', value: 'cursive'},
+        {title: 'Times New Roman', value: 'Times New Roman'},
       ],
       dataMode: 1,
       history: true,

package/designer.vue

@@ -265,14 +265,14 @@
   </el-dialog>
 </template>
 <script setup>
-import { onMounted, ref, onActivated, onDeactivated, computed, watch, nextTick } from "vue";
-import { hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource } from "yh-hiprint";
-import { useRoute, onBeforeRouteUpdate } from "vue-router/dist/vue-router";
-import { ElMessageBox } from "element-plus";
-import axios from "@/libs/api.request";
+import {onMounted, ref, onActivated, onDeactivated, computed, watch, nextTick} from 'vue';
+import {hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource} from 'yh-hiprint';
+import {useRoute, onBeforeRouteUpdate} from 'vue-router/dist/vue-router';
+import {ElMessageBox} from 'element-plus';
+import axios from '@/libs/api.request';
 
 const route = useRoute();
-const { paperType, paperWidth, paperHeight, setPaper } = usePaper();
+const {paperType, paperWidth, paperHeight, setPaper} = usePaper();
 function setPaperHandler(type) {
   setPaper(type, () => {
     hiprintTemplate.value.setPaper(paperWidth.value, paperHeight.value);
@@ -281,23 +281,23 @@ function setPaperHandler(type) {
 
 const hiprintTemplate = ref(null);
 const canvasRef = ref();
-const { scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut } = useScale(() => {
+const {scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut} = useScale(() => {
   hiprintTemplate.value.zoom(scaleValue.value);
   canvasRef?.value.update();
 });
 
 const previewShow = ref(false);
-const previewHtml = ref("");
+const previewHtml = ref('');
 async function previewPrint() {
   let {
-    data: { list, json },
+    data: {list, json},
   } = await axios.request({
     url: `/printTemplate/data/${detailData.value.code}`,
-    method: "post",
-    type: "json",
+    method: 'post',
+    type: 'json',
     data: [
       {
-        code: "50101820",
+        code: '50101820',
       },
     ],
   });
@@ -323,12 +323,12 @@ async function previewPrint() {
     } else {
       list = [];
     }
-    previewHtml.value = new hiprint.PrintTemplate({ template: JSON.parse(json) }).getHtml(list)[0].innerHTML;
+    previewHtml.value = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
     previewShow.value = true;
   } else {
     ElMessage.warning({
-      title: "警告",
-      message: "模板配置不存在，请检查",
+      title: '警告',
+      message: '模板配置不存在，请检查',
     });
   }
 }
@@ -337,25 +337,25 @@ function saveConfig() {
   let arr = [].concat(formCode.value);
   let json = hiprintTemplate.value.getJson();
   json.panels[0].printElements.forEach((item) => {
-    if (item.printElementType.type === "table") {
+    if (item.printElementType.type === 'table') {
       arr.push(item.options.field);
     }
   });
 
   axios
     .request({
-      url: "/printTemplate/save",
-      method: "post",
-      type: "json",
+      url: '/printTemplate/save',
+      method: 'post',
+      type: 'json',
       data: {
         id: detailData.value.id,
         json: JSON.stringify(json),
-        dsIds: arr.join(","),
+        dsIds: arr.join(','),
       },
     })
     .then((res) => {
       ElMessage.success({
-        message: "恭喜模板保存成功",
+        message: '恭喜模板保存成功',
       });
     });
 }
@@ -364,7 +364,7 @@ function clearPrint() {
   hiprintTemplate.value?.clear();
 }
 
-const { detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList } = useDataSource(axios);
+const {detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList} = useDataSource(axios);
 
 watch(
   () => formColumns.value,
@@ -387,15 +387,15 @@ watch(
 );
 let currentElementObj = ref(null);
 let currentElementObjColumns = computed(() => {
-  if (currentElementObj.value?.printElementType.type === "table") {
-    return currentElementObj.value.options.columns[0]["columns"] || [];
+  if (currentElementObj.value?.printElementType.type === 'table') {
+    return currentElementObj.value.options.columns[0]['columns'] || [];
   } else {
     return [];
   }
 });
 
 function tableFieldChange(val) {
-  currentElementObj.value.updateOption("field", val);
+  currentElementObj.value.updateOption('field', val);
 }
 
 function tableColumnCancel() {
@@ -417,11 +417,11 @@ function init() {
             options: [],
           },
           {
-            name: "样式",
+            name: '样式',
             options: [
               {
-                name: "scale",
-                after: "transform",
+                name: 'scale',
+                after: 'transform',
                 hidden: false,
               },
             ],
@@ -429,16 +429,16 @@ function init() {
         ],
         supportOptions: [
           {
-            name: "styler",
+            name: 'styler',
             hidden: true,
           },
           {
-            name: "scale",
-            after: "transform",
+            name: 'scale',
+            after: 'transform',
             hidden: false,
           },
           {
-            name: "formatter",
+            name: 'formatter',
             hidden: true,
           },
         ],
@@ -447,18 +447,18 @@ function init() {
         tabs: [
           {
             replace: true,
-            name: "基本",
+            name: '基本',
             options: [
               {
-                name: "field",
+                name: 'field',
                 hidden: false,
               },
               {
-                name: "src",
+                name: 'src',
                 hidden: false,
               },
               {
-                name: "fit",
+                name: 'fit',
                 hidden: false,
               },
             ],
@@ -466,31 +466,30 @@ function init() {
         ],
       },
       table: {
-        tabs: [{ options: [{ name: "field", hidden: true }] }],
+        tabs: [{options: [{name: 'field', hidden: true}]}],
       },
     });
 
-    hiprint.PrintElementTypeManager.buildByHtml(hiprintJQuery(".ep-draggable-item"));
-    hiprintJQuery("#hiprint-printTemplate").empty();
+    hiprint.PrintElementTypeManager.buildByHtml(hiprintJQuery('.ep-draggable-item'));
+    hiprintJQuery('#hiprint-printTemplate').empty();
     let template = JSON.parse(detailData.value.json) || panel;
     hiprintTemplate.value = new hiprint.PrintTemplate({
       template,
       onImageChooseClick: (target) => {
         // 测试 3秒后修改图片地址值
         setTimeout(() => {
-          target.refresh("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==", {
+          target.refresh('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==', {
             real: true,
           });
         }, 3000);
       },
       fontList: [
-        { title: "微软雅黑", value: "Microsoft YaHei" },
-        { title: "黑体", value: "STHeitiSC-Light" },
-        { title: "思源黑体", value: "SourceHanSansCN-Normal" },
-        { title: "王羲之书法体", value: "王羲之书法体" },
-        { title: "宋体", value: "SimSun" },
-        { title: "华为楷体", value: "STKaiti" },
-        { title: "cursive", value: "cursive" },
+        {title: '微软雅黑', value: 'Microsoft YaHei'},
+        {title: '黑体', value: 'STHeitiSC-Light'},
+        {title: '思源黑体', value: 'SourceHanSansCN-Normal'},
+        {title: '宋体', value: 'SimSun'},
+        {title: 'cursive', value: 'cursive'},
+        {title: 'Times New Roman', value: 'Times New Roman'},
       ],
       dataMode: 1,
       history: true,
@@ -501,11 +500,11 @@ function init() {
       onUpdateError: (e) => {
         // console.error(e);
       },
-      settingContainer: "#PrintElementOptionSetting",
-      paginationContainer: ".hiprint-printPagination",
+      settingContainer: '#PrintElementOptionSetting',
+      paginationContainer: '.hiprint-printPagination',
     });
 
-    hiprintTemplate.value.design("#hiprint-printTemplate", { grid: true });
+    hiprintTemplate.value.design('#hiprint-printTemplate', {grid: true});
     scaleValue.value = hiprintTemplate.value.editingPanel.scale || 1;
     window.ht = hiprintTemplate.value;
 
@@ -519,7 +518,7 @@ function init() {
         })
       );
     }
-    hiprintJQuery(".hiprint-designer").on("mousedown", ".hiprint-printElement", (e) => {
+    hiprintJQuery('.hiprint-designer').on('mousedown', '.hiprint-printElement', (e) => {
       let t = e.currentTarget;
       let pes = hiprintTemplate.value.editingPanel.printElements;
       let index = pes.map((item) => item.designTarget[0]).indexOf(t);
@@ -533,8 +532,8 @@ function init() {
     console.log(error.message);
     clearPrint();
     hiprintTemplate.value = null;
-    if (error.message.indexOf("setTemplateId") > -1) {
-      ElMessageBox.alert("模板有错误，请返回列表手动修改或这清空模板！");
+    if (error.message.indexOf('setTemplateId') > -1) {
+      ElMessageBox.alert('模板有错误，请返回列表手动修改或这清空模板！');
     }
   }
 }
@@ -550,7 +549,7 @@ async function updateTemplate() {
     if (detailData.value && detailData.value.json) {
       let jsonObj = JSON.parse(detailData.value.json);
       hiprintTemplate.value.update(jsonObj);
-      let { width, height } = jsonObj.panels[0];
+      let {width, height} = jsonObj.panels[0];
       paperWidth.value = width;
       paperHeight.value = height;
       hiprintTemplate.value.setPaper(width, height);
@@ -567,7 +566,7 @@ async function updateTemplate() {
             paperNumberLeft: 430,
             paperNumberTop: 5,
             printElements: [],
-            watermarkOptions: { content: "", rotate: 25, timestamp: false, format: "YYYY-MM-DD HH:mm" },
+            watermarkOptions: {content: '', rotate: 25, timestamp: false, format: 'YYYY-MM-DD HH:mm'},
           },
         ],
       });

package/libs/hiprint.bundle.js

@@ -2649,7 +2649,17 @@ var hiprint = (function (t) {
                 (n += " </select>\n            </div>\n        </div>"),
                 (this.target = hiprintJQuery(n));
             } else {
-              this.target = hiprintJQuery(' <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">\n        <option value="" >默认</option>\n            <option value="SimSun" >宋体</option>\n            <option value="Microsoft YaHei" >微软雅黑</option>\n        </select>\n        </div>\n    </div>');
+              this.target = hiprintJQuery(`<div class="hiprint-option-item">
+                <div class="hiprint-option-item-label">字体</div>
+                <div class="hiprint-option-item-field">
+                  <select class="auto-submit">
+                    <option value="" >默认</option>
+                    <option value="SimSun" >宋体</option>
+                    <option value="Microsoft YaHei" >微软雅黑</option>
+                    <option value="Times New Roman" >Times New Roman</option>
+                  </select>
+                </div>
+              </div>`);
             }
             return this.target;
           }),

package/libs/jsbarcode/JsBarcode.js

@@ -1,225 +1,225 @@
-// Import all the barcodes
-import barcodes from './barcodes/';
-
-// Help functions
-import merge from './help/merge.js';
-import linearizeEncodings from './help/linearizeEncodings.js';
-import fixOptions from './help/fixOptions.js';
-import getRenderProperties from './help/getRenderProperties.js';
-import optionsFromStrings from './help/optionsFromStrings.js';
-
-// Exceptions
-import ErrorHandler from './exceptions/ErrorHandler.js';
-import { InvalidInputException, NoElementException } from './exceptions/exceptions.js';
-
-// Default values
-import defaults from './options/defaults.js';
-
-// The protype of the object returned from the JsBarcode() call
-let API = function () {};
-
-// The first call of the library API
-// Will return an object with all barcodes calls and the data that is used
-// by the renderers
-let JsBarcode = function (element, text, options) {
-  var api = new API();
-
-  if (typeof element === "undefined") {
-    throw Error("No element to render on was provided.");
-  }
-
-  // Variables that will be pased through the API calls
-  api._renderProperties = getRenderProperties(element);
-  api._encodings = [];
-  api._options = defaults;
-  api._errorHandler = new ErrorHandler(api);
-
-  // If text is set, use the simple syntax (render the barcode directly)
-  if (typeof text !== "undefined") {
-    options = options || {};
-
-    if (!options.format) {
-      options.format = autoSelectBarcode();
-    }
-
-    api.options(options)[options.format](text, options).render();
-  }
-
-  return api;
-};
-
-// To make tests work TODO: remove
-JsBarcode.getModule = function (name) {
-  return barcodes[name];
-};
-
-// Register all barcodes
-for (var name in barcodes) {
-  if (barcodes.hasOwnProperty(name)) { // Security check if the propery is a prototype property
-    registerBarcode(barcodes, name);
-  }
-}
-function registerBarcode (barcodes, name) {
-  API.prototype[name] =
-    API.prototype[name.toUpperCase()] =
-    API.prototype[name.toLowerCase()] =
-    function (text, options) {
-      var api = this;
-      return api._errorHandler.wrapBarcodeCall(function () {
-        // Ensure text is options.text
-        options.text = typeof options.text === 'undefined' ? undefined : '' + options.text;
-
-        var newOptions = merge(api._options, options);
-        newOptions = optionsFromStrings(newOptions);
-        var Encoder = barcodes[name];
-        var encoded = encode(text, Encoder, newOptions);
-        api._encodings.push(encoded);
-
-        return api;
-      });
-    };
-}
-
-// encode() handles the Encoder call and builds the binary string to be rendered
-function encode (text, Encoder, options) {
-  // Ensure that text is a string
-  text = "" + text;
-
-  var encoder = new Encoder(text, options);
-
-  // If the input is not valid for the encoder, throw error.
-  // If the valid callback option is set, call it instead of throwing error
-  if (!encoder.valid()) {
-    throw new InvalidInputException(encoder.constructor.name, text);
-  }
-
-  // Make a request for the binary data (and other infromation) that should be rendered
-  var encoded = encoder.encode();
-
-  // Encodings can be nestled like [[1-1, 1-2], 2, [3-1, 3-2]
-  // Convert to [1-1, 1-2, 2, 3-1, 3-2]
-  encoded = linearizeEncodings(encoded);
-
-  // Merge
-  for (let i = 0; i < encoded.length; i++) {
-    encoded[i].options = merge(options, encoded[i].options);
-  }
-
-  return encoded;
-}
-
-function autoSelectBarcode () {
-  // If CODE128 exists. Use it
-  if (barcodes["CODE128"]) {
-    return "CODE128";
-  }
-
-  // Else, take the first (probably only) barcode
-  return Object.keys(barcodes)[0];
-}
-
-// Sets global encoder options
-// Added to the api by the JsBarcode function
-API.prototype.options = function (options) {
-  this._options = merge(this._options, options);
-  return this;
-};
-
-// Will create a blank space (usually in between barcodes)
-API.prototype.blank = function (size) {
-  const zeroes = new Array(size + 1).join("0");
-  this._encodings.push({ data: zeroes });
-  return this;
-};
-
-// Initialize JsBarcode on all HTML elements defined.
-API.prototype.init = function () {
-  // Should do nothing if no elements where found
-  if (!this._renderProperties) {
-    return;
-  }
-
-  // Make sure renderProperies is an array
-  if (!Array.isArray(this._renderProperties)) {
-    this._renderProperties = [this._renderProperties];
-  }
-
-  var renderProperty;
-  for (let i in this._renderProperties) {
-    renderProperty = this._renderProperties[i];
-    var options = merge(this._options, renderProperty.options);
-
-    if (options.format == "auto") {
-      options.format = autoSelectBarcode();
-    }
-
-    this._errorHandler.wrapBarcodeCall(function () {
-      var text = options.value;
-      var Encoder = barcodes[options.format.toUpperCase()];
-      var encoded = encode(text, Encoder, options);
-
-      render(renderProperty, encoded, options);
-    });
-  }
-};
-
-
-// The render API call. Calls the real render function.
-API.prototype.render = function () {
-  if (!this._renderProperties) {
-    throw new NoElementException();
-  }
-
-  if (Array.isArray(this._renderProperties)) {
-    for (var i = 0; i < this._renderProperties.length; i++) {
-      render(this._renderProperties[i], this._encodings, this._options);
-    }
-  }
-  else {
-    render(this._renderProperties, this._encodings, this._options);
-  }
-
-  return this;
-};
-
-API.prototype._defaults = defaults;
-
-// Prepares the encodings and calls the renderer
-function render (renderProperties, encodings, options) {
-  encodings = linearizeEncodings(encodings);
-
-  for (let i = 0; i < encodings.length; i++) {
-    encodings[i].options = merge(options, encodings[i].options);
-    fixOptions(encodings[i].options);
-  }
-
-  fixOptions(options);
-
-  var Renderer = renderProperties.renderer;
-  var renderer = new Renderer(renderProperties.element, encodings, options);
-  renderer.render();
-
-  if (renderProperties.afterRender) {
-    renderProperties.afterRender();
-  }
-}
-
-// Export to browser
-if (typeof window !== "undefined") {
-  window.JsBarcode = JsBarcode;
-}
-
-// Export to jQuery
-/*global jQuery */
-if (typeof hiprintJQuery !== 'undefined') {
-  hiprintJQuery.fn.JsBarcode = function (content, options) {
-    var elementArray = [];
-    hiprintJQuery(this).each(function () {
-      elementArray.push(this);
-    });
-    return JsBarcode(elementArray, content, options);
-  };
-}
-
-// Export to commonJS
-export default JsBarcode;
+// Import all the barcodes
+import barcodes from './barcodes/';
+
+// Help functions
+import merge from './help/merge.js';
+import linearizeEncodings from './help/linearizeEncodings.js';
+import fixOptions from './help/fixOptions.js';
+import getRenderProperties from './help/getRenderProperties.js';
+import optionsFromStrings from './help/optionsFromStrings.js';
+
+// Exceptions
+import ErrorHandler from './exceptions/ErrorHandler.js';
+import { InvalidInputException, NoElementException } from './exceptions/exceptions.js';
+
+// Default values
+import defaults from './options/defaults.js';
+
+// The protype of the object returned from the JsBarcode() call
+let API = function () {};
+
+// The first call of the library API
+// Will return an object with all barcodes calls and the data that is used
+// by the renderers
+let JsBarcode = function (element, text, options) {
+  var api = new API();
+
+  if (typeof element === "undefined") {
+    throw Error("No element to render on was provided.");
+  }
+
+  // Variables that will be pased through the API calls
+  api._renderProperties = getRenderProperties(element);
+  api._encodings = [];
+  api._options = defaults;
+  api._errorHandler = new ErrorHandler(api);
+
+  // If text is set, use the simple syntax (render the barcode directly)
+  if (typeof text !== "undefined") {
+    options = options || {};
+
+    if (!options.format) {
+      options.format = autoSelectBarcode();
+    }
+
+    api.options(options)[options.format](text, options).render();
+  }
+
+  return api;
+};
+
+// To make tests work TODO: remove
+JsBarcode.getModule = function (name) {
+  return barcodes[name];
+};
+
+// Register all barcodes
+for (var name in barcodes) {
+  if (barcodes.hasOwnProperty(name)) { // Security check if the propery is a prototype property
+    registerBarcode(barcodes, name);
+  }
+}
+function registerBarcode (barcodes, name) {
+  API.prototype[name] =
+    API.prototype[name.toUpperCase()] =
+    API.prototype[name.toLowerCase()] =
+    function (text, options) {
+      var api = this;
+      return api._errorHandler.wrapBarcodeCall(function () {
+        // Ensure text is options.text
+        options.text = typeof options.text === 'undefined' ? undefined : '' + options.text;
+
+        var newOptions = merge(api._options, options);
+        newOptions = optionsFromStrings(newOptions);
+        var Encoder = barcodes[name];
+        var encoded = encode(text, Encoder, newOptions);
+        api._encodings.push(encoded);
+
+        return api;
+      });
+    };
+}
+
+// encode() handles the Encoder call and builds the binary string to be rendered
+function encode (text, Encoder, options) {
+  // Ensure that text is a string
+  text = "" + text;
+
+  var encoder = new Encoder(text, options);
+
+  // If the input is not valid for the encoder, throw error.
+  // If the valid callback option is set, call it instead of throwing error
+  if (!encoder.valid()) {
+    throw new InvalidInputException(encoder.constructor.name, text);
+  }
+
+  // Make a request for the binary data (and other infromation) that should be rendered
+  var encoded = encoder.encode();
+
+  // Encodings can be nestled like [[1-1, 1-2], 2, [3-1, 3-2]
+  // Convert to [1-1, 1-2, 2, 3-1, 3-2]
+  encoded = linearizeEncodings(encoded);
+
+  // Merge
+  for (let i = 0; i < encoded.length; i++) {
+    encoded[i].options = merge(options, encoded[i].options);
+  }
+
+  return encoded;
+}
+
+function autoSelectBarcode () {
+  // If CODE128 exists. Use it
+  if (barcodes["CODE128"]) {
+    return "CODE128";
+  }
+
+  // Else, take the first (probably only) barcode
+  return Object.keys(barcodes)[0];
+}
+
+// Sets global encoder options
+// Added to the api by the JsBarcode function
+API.prototype.options = function (options) {
+  this._options = merge(this._options, options);
+  return this;
+};
+
+// Will create a blank space (usually in between barcodes)
+API.prototype.blank = function (size) {
+  const zeroes = new Array(size + 1).join("0");
+  this._encodings.push({ data: zeroes });
+  return this;
+};
+
+// Initialize JsBarcode on all HTML elements defined.
+API.prototype.init = function () {
+  // Should do nothing if no elements where found
+  if (!this._renderProperties) {
+    return;
+  }
+
+  // Make sure renderProperies is an array
+  if (!Array.isArray(this._renderProperties)) {
+    this._renderProperties = [this._renderProperties];
+  }
+
+  var renderProperty;
+  for (let i in this._renderProperties) {
+    renderProperty = this._renderProperties[i];
+    var options = merge(this._options, renderProperty.options);
+
+    if (options.format == "auto") {
+      options.format = autoSelectBarcode();
+    }
+
+    this._errorHandler.wrapBarcodeCall(function () {
+      var text = options.value;
+      var Encoder = barcodes[options.format.toUpperCase()];
+      var encoded = encode(text, Encoder, options);
+
+      render(renderProperty, encoded, options);
+    });
+  }
+};
+
+
+// The render API call. Calls the real render function.
+API.prototype.render = function () {
+  if (!this._renderProperties) {
+    throw new NoElementException();
+  }
+
+  if (Array.isArray(this._renderProperties)) {
+    for (var i = 0; i < this._renderProperties.length; i++) {
+      render(this._renderProperties[i], this._encodings, this._options);
+    }
+  }
+  else {
+    render(this._renderProperties, this._encodings, this._options);
+  }
+
+  return this;
+};
+
+API.prototype._defaults = defaults;
+
+// Prepares the encodings and calls the renderer
+function render (renderProperties, encodings, options) {
+  encodings = linearizeEncodings(encodings);
+
+  for (let i = 0; i < encodings.length; i++) {
+    encodings[i].options = merge(options, encodings[i].options);
+    fixOptions(encodings[i].options);
+  }
+
+  fixOptions(options);
+
+  var Renderer = renderProperties.renderer;
+  var renderer = new Renderer(renderProperties.element, encodings, options);
+  renderer.render();
+
+  if (renderProperties.afterRender) {
+    renderProperties.afterRender();
+  }
+}
+
+// Export to browser
+if (typeof window !== "undefined") {
+  window.JsBarcode = JsBarcode;
+}
+
+// Export to jQuery
+/*global jQuery */
+if (typeof hiprintJQuery !== 'undefined') {
+  hiprintJQuery.fn.JsBarcode = function (content, options) {
+    var elementArray = [];
+    hiprintJQuery(this).each(function () {
+      elementArray.push(this);
+    });
+    return JsBarcode(elementArray, content, options);
+  };
+}
+
+// Export to commonJS
+export default JsBarcode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-hiprint",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Hiprint for Vue3 by NoahLiu in ForceCon in Hunan Changesha",
   "main": "index.js",
   "types": "index.d.ts",