Merge pull request #122 from Xavier9896/main

chore: 条码自动增加宽度优化调整；模版中心预览图片资源调整

CHANGELOG.md

@@ -4,6 +4,21 @@
 ### 💐  同时自动更新 GitHub Pages 同步 Gitee;
 ### 💐  感谢各位贡献者的支持。 🔥
 
+## 0.0.57-beta22(2024-05-13)
+
+<details>
+  <summary>01. ✨ 调整优化 text、barcode 类型条码自动增加宽度优化 </summary>
+
+  经过一段时间的测试及实验，找到了 [JsBarcode](https://github.com/lindell/JsBarcode) 与 [bwip-js](https://github.com/metafloor/bwip-js) 两个库实现条码宽度自动增加的较优方案。（感谢Q群用户 【︶ㄣ夏＾熟 。】的测试）
+
+  现在你可以在 text[textType='barcode']、barCode 元素中设置 barAutoWidth 属性，使条码以渲染时 svg 提供的最小尺寸自动增加宽度。
+
+  > 0.0.57-beta20 版本中 条码宽度 = svg宽度 * 1.2，该倍率不是很合理，在此版本中修改为 1.05
+</details>
+<details>
+  <summary>02. ✨ 调整优化 模版中心预览图片资源调整</summary>
+</details>
+
 ## 0.0.57-beta20(2024-03-19)
 
 <details>

src/demo/templates/template-files/template1.js

@@ -3,7 +3,7 @@ export const desc = '这是模板说明'
 export const author = 'CcSimple'
 export const link = 'https://github.com/CcSimple'
 // url 或者 base64 或者 require('../../../assets/logo.png')
-export const preview = 'https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template1.png';
+export const preview = '/static/template1.png';
 export const printData = {
   name: '黄磊',
   logoTest: 'https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60',

src/demo/templates/template-files/template2.js

@@ -9,7 +9,7 @@ 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 preview = '/static/template2.png';
 export const printData = {
 	table: [
 		{

src/demo/templates/template-files/template3.js

@@ -3,7 +3,7 @@ export const desc = '首列合并示例';
 export const author = 'CcSimple'
 export const link = 'https://github.com/CcSimple'
 // url 或者 base64 或者 require('../../../assets/logo.png')
-export const preview = 'https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template3.png';
+export const preview = '/static/template3.png';
 export const printData = {
   table: [
     {

src/demo/templates/template-files/template4.js

@@ -3,7 +3,7 @@ export const desc = '不一样的表格显示效果';
 export const author = '群友提供'
 export const link = 'https://github.com/CcSimple'
 // url 或者 base64 或者 require('../../../assets/logo.png')
-export const preview = 'https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template4.png';
+export const preview = '/static/template4.png';
 export const extendCss = "<style>.products  {\n" +
     "    display: flex;\n" +
     "    flex-wrap: wrap;\n" +

src/demo/templates/template-files/template5.js

@@ -10,7 +10,7 @@ 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";
+  "/static/template5.png";
 export const printData = {
   DMCode1: "123456",
   DMCode2: "234567",

src/demo/templates/template-files/template6.js

@@ -2,15 +2,15 @@
  * @Author: 54xavier
  * @LastEditors: [email protected]
  * @Date: 2023-02-28 14:00:03
- * @LastEditTime: 2023-08-08 19:32:55
+ * @LastEditTime: 2024-05-13 23:39:39
  */
 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";
+  "/static/template6.png";
 function getRandomInt({ min = 10, max = 200 }) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
@@ -197,12 +197,24 @@ export const json = {
           options: {
             left: 12,
             top: 460,
-            height: 12,
+            height: 45,
             width: 418,
             title:
               "说明：此处模版以一个不可见 html 元素加载 echarts ，故第一次打开无法显示预览，但后续的 print api 能够正常显示，你可以在你的项目中全局加载 echarts 依赖，保证设计、预览时能加载到 echarts 依赖，即可删除用于引入依赖的html元素。使用 print2 需要在 electron-hiprint 项目渲染层中添加该依赖，否则客户端首次打印都无法正常渲染 echarts",
           },
-          printElementType: { title: "说明", type: "text" },
+          printElementType: { title: "说明", type: "longText" },
+        },
+        {
+          options: {
+            left: 12,
+            top: 505,
+            height: 24,
+            width: 418,
+            color: "#FF0000",
+            title:
+              "注意：Echarts 默认开启 动画，请在 option 中配置 animation 为 false，否则打印时因为动画会导致只显示动画第一帧",
+          },
+          printElementType: { title: "注意", type: "longText" },
         },
       ],
       paperNumberLeft: 565.5,

src/demo/templates/template-files/template7.js

@@ -3,7 +3,7 @@ export const desc = "动态数据多列行合并示例";
 export const author = "54xavier";
 export const link = "https://ccsimple.gitee.io/vue-plugin-hiprint/";
 export const preview =
-  "https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template7.png";
+  "/static/template7.png";
 
 import _ from "lodash";
 

src/hiprint/hiprint.bundle.js

@@ -8824,7 +8824,8 @@ var hiprint = function (t) {
       }, e.prototype.getBarWidth = function () {
         return (null == this.barWidth ? this.defaultOptions.barWidth : this.barWidth) || 1;
       }, e.prototype.getBarAutoWidth = function () {
-        return (null == this.barAutoWidth ? this.defaultOptions.barAutoWidth : this.barAutoWidth) ?? true;
+        // 该属性 "true" 为 true，其余一概为 false
+        return (null == this.barAutoWidth ? this.defaultOptions.barAutoWidth === "true" : this.barAutoWidth === "true") ?? true;
       }, e.prototype.getQRcodeLevel = function () {
         return (null == this.qrCodeLevel ? this.defaultOptions.qrCodeLevel : this.qrCodeLevel) || 0;
       }, e;
@@ -8864,15 +8865,16 @@ var hiprint = function (t) {
           n = this.createTarget(this.printElementType.getText(!0), e);
         return this.updateTargetSize(n), this.css(n, e), n;
       }, e.prototype.updateDesignViewFromOptions = function () {
-        var els = this.panel.printElements.filter(function (t) {
-          return ('block' == t.designTarget.children().last().css('display')
-            && t.designTarget.children().last().hasClass('selected')) && !t.printElementType.type.includes('table');
-        });
-        els.forEach(ele => {
-          var t = ele.getData()
-          ele.css(ele.designTarget, t)
-          this.updateTargetText(ele.designTarget, ele.getTitle(), t)
-        })
+        // ! pub-beta 0.0.57-beta22 这里的处理似乎重复了，影响了 updateTargetText 方法执行，故在此处注释掉
+        // var els = this.panel.printElements.filter(function (t) {
+        //   return ('block' == t.designTarget.children().last().css('display')
+        //     && t.designTarget.children().last().hasClass('selected')) && !t.printElementType.type.includes('table');
+        // });
+        // els.forEach(ele => {
+        //   var t = ele.getData()
+        //   ele.css(ele.designTarget, t)
+        //   this.updateTargetText(ele.designTarget, ele.getTitle(), t)
+        // })
         if (this.designTarget) {
           var t = this.getData();
           this.css(this.designTarget, t), this.updateTargetText(this.designTarget, this.getTitle(), t);
@@ -8906,7 +8908,8 @@ var hiprint = function (t) {
               "display": "flex",
               "flex-direction": "column"
             })
-            a.html('<svg width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg ><div class="hibarcode_displayValue" style="white-space:nowrap"></div>');
+            // pub-beta 0.0.57-beta22 移除插件通过 div 添加的文本元素，默认使用 JsBarcode 生成条形码文本
+            a.html('<svg width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>');
             try {
               n ? (JsBarcode(a.find(".hibarcode_imgcode")[0], n, {
                 format: this.options.getbarcodeMode(),
@@ -8915,11 +8918,14 @@ var hiprint = function (t) {
                 lineColor: this.options.color || "#000000",
                 margin: 0,
                 height: parseInt(o.a.pt.toPx(this.options.getHeight() || 10).toString()),
-                displayValue: !1
-              }), a.find(".hibarcode_imgcode").attr("height", "100%"), a.find(".hibarcode_imgcode").attr("width", "100%"), this.options.hideTitle || a.find(".hibarcode_displayValue").html(n)) : a.html("");
-              let svgWidth = a.find(".hibarcode_imgcode rect")[0].attributes.width.value * 1.2
-              if (this.options.getBarAutoWidth() && svgWidth > hinnn.pt.toPx(this.options.width)) {
-                this.options.width = Math.ceil(hinnn.px.toPt(svgWidth));
+                displayValue: !this.options.hideTitle,
+              }), a.find(".hibarcode_imgcode").attr("height", "100%"), a.find(".hibarcode_imgcode").attr("width", "100%")) : a.html("");
+              // pub-beta 0.0.57-beta22 解决条形码自动宽度问题
+              let svgWidth = a.find(".hibarcode_imgcode rect")[0].attributes.width.value
+              svgWidth = Math.ceil(hinnn.px.toPt(svgWidth * 1.05));
+              if (this.options.getBarAutoWidth() && svgWidth > this.options.width) {
+                a.parent().css("width", svgWidth + 'pt')
+                this.options.width = svgWidth;
               }
             } catch (t) {
               console.log(t), a.html(`${i18n.__('此格式不支持该文本')}`);
@@ -9223,6 +9229,8 @@ var hiprint = function (t) {
         }
       }, e.prototype.getConfigOptions = function () {
         return p.a.instance.barcode;
+      }, e.prototype.getBarAutoWidth = function () {
+        return (null == this.options.barAutoWidth ? this.options.defaultOptions.barAutoWidth === "true" : this.options.barAutoWidth === "true") ?? true;
       }, e.prototype.onResize = function (e, n, i, o, r) {
         t.prototype.onResize.call(this, e, n, i, o, r);
         this.initBarcode(this.designTarget, this.getTitle(), this.getData())
@@ -9243,19 +9251,30 @@ var hiprint = function (t) {
             bcid: this.options.barcodeType || 'code128',
             text: text || this.options.testData || this.options.title,
             scale: this.options.barWidth || 1,
-            width: parseInt(o.a.pt.toMm(this.options.getWidth())),
+            width: !this.getBarAutoWidth() ? parseInt(o.a.pt.toMm(this.options.getWidth())) : '',
             height: parseInt(height),
-            includetext: false,
+            includetext: !this.options.hideTitle,
             barcolor: this.options.barColor || "#000",
           })
-          content.html($(barcode))
-          if (!this.options.hideTitle) {
-            const titleText = title ? title + ( text ? ':' : '' ) : '';
-            const textAlign = this.options.textAlign || 'center';
-            // 支持type为barcode的textAlign属性
-            const textStyle = textAlign === 'justify' ? 'text-align-last: justify;text-justify: distribute-all-lines;' : `text-align: ${ textAlign };`
-            content.append($(`<div class="hiprint-printElement-barcode-content-title" style="${ textStyle }">${ titleText }${ text }</div>`))
-          }
+          // pub-beta 0.0.57-beta22 优化了条码自动调整宽度的逻辑，title 文本改为使用 bwipjs 文本内部实现
+          barcode = $(barcode)
+          // pub-beta 0.0.57-beta22 svg 元素需要添加 preserveAspectRatio 属性，使其横向可以自适应缩放
+          barcode.attr("preserveAspectRatio", "none slice")
+          let svgWidth = barcode[0].attributes.viewBox.value.split(" ")[2]; // 通过 viewBox 属性获取 bwipjs 内部生成的 svg 宽度
+          svgWidth = Math.ceil(hinnn.px.toPt(svgWidth * 1.05));
+          if (this.getBarAutoWidth() && svgWidth > this.options.width) {
+            content.parent().css("width", svgWidth + 'pt')
+            barcode.css("height", "100%");
+            this.options.width = svgWidth;
+          }
+          content.html(barcode)
+          // if (!this.options.hideTitle) {
+          //   const titleText = title ? title + ( text ? ':' : '' ) : '';
+          //   const textAlign = this.options.textAlign || 'center';
+          //   // 支持type为barcode的textAlign属性
+          //   const textStyle = textAlign === 'justify' ? 'text-align-last: justify;text-justify: distribute-all-lines;' : `text-align: ${ textAlign };`
+          //   content.append($(`<div class="hiprint-printElement-barcode-content-title" style="${ textStyle }">${ titleText }${ text }</div>`))
+          // }
         } catch (error) {
           console.error(error)
           content.html($(`<div>${i18n.__('条形码生成失败')}</div>`))

src/hiprint/hiprint.config.js

@@ -448,6 +448,7 @@
       default: {
         width: 120,
         height: 9.75,
+        // barAutoWidth: 'true' 这里必须使用字符串
       }
     },
     image: {
@@ -1860,6 +1861,9 @@
         }, {
           name: 'barWidth',
           hidden: false
+        }, {
+          name: 'barAutoWidth',
+          hidden: false
         }, {
           name: 'coordinate',
           hidden: false
@@ -1949,6 +1953,9 @@
       }, {
         name: 'barWidth',
         hidden: false
+      }, {
+        name: 'barAutoWidth',
+        hidden: false
       }, {
         name: 'coordinate',
         hidden:false
@@ -2022,6 +2029,7 @@
         title: '条形码',
         barcodeType: 'code128',
         testData: 'barcode'
+        // barAutoWidth: 'true' 这里必须使用字符串
       }
     },
     qrcode: {