Download Link Broken

[ericfrancisco]

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]

Is it fixed?

[JosephShepin]

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

[mat813]

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]

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]

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();

[Gimanh]

Here is last fixes. https://www.npmjs.com/package/qr-code-generator-vue3/v/1.4.21

[scholtz]

Fixed in last update. Demo is here: https://github.com/scholtz/qrcode-vue3-sample/blob/master/src/App.vue#L12