scholtz/qrcode-vue3

Download Link Broken

Opened this issue · 7 comments

ericfrancisco commented

Download link doesn't work. Looks like when this was forked the function tied to the Download button was deleted.
@click="onDownloadClick"

The onDownloadClick function is not referenced anywhere and thus never happens

kdbagwe commented

Is it fixed?

JosephShepin commented

no it's not fixed. Wish it was though!

mat813 commented

And with vue-tsc 1.0, it now errors out on compilation even if download is disabled :(

$ vue-tsc --noEmit && vite build
node_modules/qrcode-vue3/src/QRCodeVue3.vue:7:23 - error TS2339: Property 'onDownloadClick' does not exist on type '{ $: ComponentInternalInstance; $data: { imageUrl: string; qrCode: QRCodeStyling; }; $props: Partial<{ download: boolean; imageOptions: Record<string, any>; ... 13 more ...; downloadOptions: Record<...>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...>): Wa...'.

7       <button @click="onDownloadClick" :class="downloadButton">
                        ~~~~~~~~~~~~~~~


Found 1 error in node_modules/qrcode-vue3/src/QRCodeVue3.vue:7
JosephShepin commented

And with vue-tsc 1.0, it now errors out on compilation even if download is disabled :(

$ vue-tsc --noEmit && vite build
node_modules/qrcode-vue3/src/QRCodeVue3.vue:7:23 - error TS2339: Property 'onDownloadClick' does not exist on type '{ $: ComponentInternalInstance; $data: { imageUrl: string; qrCode: QRCodeStyling; }; $props: Partial<{ download: boolean; imageOptions: Record<string, any>; ... 13 more ...; downloadOptions: Record<...>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...>): Wa...'.

7       <button @click="onDownloadClick" :class="downloadButton">
                        ~~~~~~~~~~~~~~~


Found 1 error in node_modules/qrcode-vue3/src/QRCodeVue3.vue:7

This package has a lot of problems. The best thing to do if you really need it is to fork it and fix it yourself. I did that but I never fixed the download button - it looks like an easy fix tho.

yxw770 commented

You can try this code:
const image = document.querySelector(".wallet__img-qrcode img") const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); // Get the base64 encoded data of the image const url = canvas.toDataURL("image/png"); var link = document.createElement("a"); document.body.appendChild(link); // for Firefox link.setAttribute("href", url); const fileName = (new Date()).toLocaleString() + '-qr-code.png' link.setAttribute("download", fileName); link.click();