Merge pull request #45 from Xavier9896/main

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

@@ -2,7 +2,7 @@
  * @Author: 54xavier
  * @LastEditors: [email protected]
  * @Date: 2023-02-28 14:00:03
- * @LastEditTime: 2023-08-05 15:13:28
+ * @LastEditTime: 2023-08-08 19:33:15
  */
 export const name = "DM码实现";
 export const desc = "通过HTML元素实现DM码";
@@ -31,8 +31,12 @@ export const json = {
             top: 0,
             height: 1,
             width: 1,
-            formatter:
-              'function(t, e, printData) {\n  var script = document.createElement("script");\n  script.setAttribute("type", "text/javascript");\n  script.setAttribute(\n    "src",\n    "https://datalog.github.io/demo/datamatrix-svg/datamatrix.min.js"\n  );\n  return script;\n}',
+            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项目中引入依赖
@@ -47,8 +51,12 @@ export const json = {
             top: 0,
             height: 1,
             width: 1,
-            formatter:
-              'function(t, e, printData) {\n  var script = document.createElement("script");\n  script.setAttribute("type", "text/javascript");\n  script.setAttribute(\n    "src",\n    "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/4.0.0/bwip-js-min.js"\n  );\n  return script;\n}',
+            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项目中引入依赖
@@ -63,8 +71,14 @@ export const json = {
             top: 12,
             height: 200,
             width: 200,
-            formatter:
-              'function(t, e, printData) {\n  if (window.DATAMatrix) {\n    var svgNode = DATAMatrix({msg: printData?.DMCode1 || "testData", dim: 267});\n    return svgNode;\n  } else {\n    return "<div style=\'width: 267px;height: 267px;border: 1px solid;\'>点击打印预览查看</div>";\n  }\n}',
+            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,
           },
@@ -76,8 +90,21 @@ export const json = {
             top: 12,
             height: 200,
             width: 200,
-            formatter:
-              'function(t, e, printData) {\n  if (window.bwipjs) {\n    var canvas = document.createElement("canvas");\n    var _bwip = bwipjs.toCanvas(canvas, {\n      bcid: "datamatrix",\n      text: printData?.DMCode2 || "testData",\n      scale: 3,\n      width: 30,\n      height: 30,\n    });\n    return `<img src="${_bwip.toDataURL()}"/>`;\n  } else {\n    return "<div style=\'width: 267px;height: 267px;border: 1px solid;\'>点击打印预览查看</div>";\n  }\n}',
+            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,
@@ -123,6 +150,17 @@ export const json = {
           },
           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,

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

@@ -0,0 +1,223 @@
+/*
+ * @Author: 54xavier
+ * @LastEditors: [email protected]
+ * @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,
+};