aiolabs/lnbits
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
dni ⚡ 2025-12-16 13:12:11 +01:00 • committed by GitHub
parent b6e111b21c
commit c7297d2e77
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 51 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lnbits/static/bundle-components.min.js vendored
View file

File diff suppressed because one or more lines are too long

39
lnbits/static/js/components/lnbits-qrcode.js
View file

@ -13,6 +13,10 @@ window.app.component('lnbits-qrcode', {
type: Boolean, type: Boolean,
default: false default: false
}, },
print: {
type: Boolean,
default: false
},
showButtons: { showButtons: {
type: Boolean, type: Boolean,
default: true default: true
@ -41,6 +45,41 @@ window.app.component('lnbits-qrcode', {
} }
}, },
methods: { 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) { clickQrCode(event) {
if (this.href === '') { if (this.href === '') {
this.utils.copyText(this.value) this.utils.copyText(this.value)

2
lnbits/templates/components.vue
View file

@ -534,7 +534,7 @@ include('components/lnbits-error.vue') %}
<q-tab name="bech32" icon="qr_code" label="bech32"></q-tab> <q-tab name="bech32" icon="qr_code" label="bech32"></q-tab>
<q-tab name="lud17" icon="link" label="url (lud17)"></q-tab> <q-tab name="lud17" icon="link" label="url (lud17)"></q-tab>
</q-tabs> </q-tabs>
<lnbits-qrcode :value="lnurl" nfc="true"></lnbits-qrcode> <lnbits-qrcode :value="lnurl" nfc="true" print="true"></lnbits-qrcode>
</div> </div>
</template> </template>

10
lnbits/templates/components/lnbits-qrcode.vue
View file

@ -44,6 +44,16 @@
> >
<q-tooltip>Write NFC Tag</q-tooltip> <q-tooltip>Write NFC Tag</q-tooltip>
</q-btn> </q-btn>
<q-btn
v-if="print"
flat
dense
class="text-grey"
@click="printQrCode()"
icon="print"
>
<q-tooltip>Print</q-tooltip>
</q-btn>
<q-btn flat dense class="text-grey" icon="download" @click="downloadSVG"> <q-btn flat dense class="text-grey" icon="download" @click="downloadSVG">
<q-tooltip>Download SVG</q-tooltip> <q-tooltip>Download SVG</q-tooltip>
</q-btn> </q-btn>