feat: add the ability to print qrcodes to <lnbits-qrcode> component (#3664)

2025-12-16 12:12:11 +00:00
parent b6e111b21c
commit c7297d2e77
4 changed files with 51 additions and 2 deletions
@@ -13,6 +13,10 @@ window.app.component('lnbits-qrcode', {
      type: Boolean,
      default: false
    },
+    print: {
+      type: Boolean,
+      default: false
+    },
    showButtons: {
      type: Boolean,
      default: true
@@ -41,6 +45,41 @@ window.app.component('lnbits-qrcode', {
    }
  },
  methods: {
+    printQrCode() {
+      const svg = this.$refs.qrCode.$el.outerHTML
+      const printWindow = window.open('', '_blank')
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>Print QR Code</title>
+            <style>
+              body {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+                margin: 0;
+              }
+              img {
+                position: absolute;
+                max-width: 51px;
+                width: 14%;
+                overflow: hidden;
+                background: #fff;
+                overflow: hidden;
+                padding: -1.2rem;
+                border-radius: -1.2rem;
+              }
+            </style>
+          </head>
+          <body>${svg}<img src="${this.logo}"></body>
+        </html>
+      `)
+      printWindow.document.close()
+      printWindow.focus()
+      printWindow.print()
+      printWindow.close()
+    },
    clickQrCode(event) {
      if (this.href === '') {
        this.utils.copyText(this.value)