x6.js

src/common/X6.js

@@ -0,0 +1,84 @@
+import { Graph, Shape, Addon, DataUri } from '@antv/x6';
+import QRCode from "qrcode";
+
+
+// 字符串转base64
+const textQrcodeToBase64 = (text) => {
+    return new Promise((res, rej) => {
+        QRCode.toDataURL(
+            text, // 二维码字符串
+            {
+                type: "image/png", // 生成dataurl图片格式
+                width: 200, // 二维码宽度
+                quality: 0.8, // 质量
+                margin: 1, // 白边大小
+                color: {
+                    dark: "#000", // 暗色颜色
+                    light: "#fff", // 亮色颜色
+                },
+            },
+            (err, dataUrl) => {
+                if (err) rej(err);
+                res(dataUrl);
+            }
+        );
+    });
+}
+export default function CreateJPEG(dom) {
+    console.log(dom);
+    return function (json,temp) {
+        return new Promise(async (res) => {
+            let graph = new Graph(
+                {
+                    container: dom,
+                    width: 1,
+                    height: 1,
+                    background: {
+                        color: '#ddd'
+                    },
+                    grid: {
+                        size: 10,
+                        visible: true
+                    },
+                    history: true,
+                    resizing: {
+                        enabled: true,
+                        restricted: true,
+                    },
+                }
+            )
+            for (const key in json) {
+                // console.log(json[key]);
+                for (let index = 0; index < temp.cells.length; index++) {
+                    
+                    if (temp.cells[index].data.type == key) {
+                        if (temp.cells[index].shape == 'image') {
+                            temp.cells[index].attrs.image['xlink:href'] = await textQrcodeToBase64(json[key])
+                        }
+                        if (temp.cells[index].shape == "rect") {
+                            console.log(111);
+                            temp.cells[index].attrs.label.text = temp.cells[index].attrs.label.text + json[key]
+                        }
+                    }
+                }
+            }
+            console.log(temp,'模板对象');
+            graph.fromJSON(temp)
+            setTimeout(()=>{
+                graph.toJPEG((dataUri) => {
+                    // dataUri就是base64的图片地址
+                    res(dataUri)
+                    // console.log(dataUri);
+                    // 'temp.jpeg' 就是图片名称
+                    // DataUri.downloadDataUri(dataUri, 'temp.jpeg')
+                }, {
+                    serializeImages: true,
+                    quality: 1
+                })
+            })
+        })
+    }
+
+    
+
+}

src/customer/printTemp/step2.vue

@@ -96,7 +96,7 @@ const handleOk = () => {
   }
   visible.value = false;
   let json =  graph.toJSON();
-  console.log(json);
+  console.log(json.cells);
   $.ajax({
     url:'/api/printPageResource/uploadCustomerPrintTemplateX6',
     type: 'post',
@@ -162,7 +162,7 @@ const getPng = () => {
     imgVisible.value = true;
     imgBase64.value = dataUri;
     console.log(dataUri);
-    // DataUri.downloadDataUri(dataUri, 'temp.jpeg');
+    DataUri.downloadDataUri(dataUri, 'temp.jpeg');
   }, {
     serializeImages: true,
     quality: 1,