Download link

[kyoukhana]

I was wondering if its possible to when you click on the qrcode it will initiate a download of the code as a image. But it should open in a new tab.

[gerardreches]

It should be possible. I would like to know which is your use case, however. Right now you just have to right click on the QR code and choose "Save image as...".

Could you please explain a use case when a download on click would be required?

How would the user know that the code will be downloaded on click? I've some UX concerns when it comes to this.

[gerardreches]

I will close this issue, waiting for a generic use case.

[abzal0]

I was wondering if its possible to when you click on the qrcode it will initiate a download of the code as a image. But it should open in a new tab.

here is a quick solution, part of the solution was found here (davidshimjs/qrcodejs#160):

Add following code into QRCode.vue at the end of mounted() :

const div = document.createElement('div');
       new QRCode(div, {
           text: this.text,
           width: this.size,
           height: this.size,
           colorDark: this.color,
           colorLight: this.bgColor,
           correctLevel: QRCode.CorrectLevel[this.errorLevel]
       });
       const src = div.children[0].toDataURL("image/png");

       const node = document.createElement("a");
       node.href = src;
       node.download = "qr.png"
       node.className = "button is-primary";
       node.target = "_blank";
       node.style = "margin: 10px auto;   display: block;   width: 50%;";
       const nodet = document.createTextNode("Download");
       node.appendChild(nodet);
       this.$el.appendChild(node);

[abzal0]

I will close this issue, waiting for a generic use case.

sometimes non-technical users won't understand that it is possible to download the image by right clicking on it and in terms of ui it is easier and quicker to download in one click on a button that on the image, added the solution above, if you wish add it into the library

[gerardreches]

Thanks for the feedback @abzal0 ,

I have reopened this feature request.

The code should be adapted to allow some level of customization, such as:

• Making this feature optional through a prop, being disabled by default.
• Adding a prop for the filename.
• Adding a slot for developers to add their own download buttons as they require, making the src available to them.

I can't do it myself at this time, but pull requests are welcome!

[gerardreches]

I am closing this issue. If there is nothing telling the user what will happen on click, this would be a problem for the UX.

Furthermore, this can easily be implemented from your own javascript.