I use the plugin "vue-qrcode" to generate QR codes for users to generate QR codes for their public profile links so they can share on their business cards.
The idea now is to give the user the possibility to download the QR code through a button and copy the QR code to the clipboard through another button to make it easier to send by mail (especially for smartphone users).
The problem is: I don't know how to download or copy the QR code. Does anyone know how to copy or download the QR code? Currently I'm using "vue-clipboard2" to copy links etc but can't seem to copy images.
I use the following code to display the QR code on our website:
Thanks - Christian
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I found a solution. The solution is as follows:
Template area:
Functional Area:
// -- 复制/下载二维码的功能区域 - 结束 --- function selectText(element) { if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); } } function copyBlobToClipboardFirefox(href) { const img = document.createElement('img'); img.src = href; const div = document.createElement('div'); div.contentEditable = true; div.appendChild(img); document.body.appendChild(div); selectText(div); const done = document.execCommand('Copy'); document.body.removeChild(div); return done; } function copyBlobToClipboard(blob) { // eslint-disable-next-line no-undef const clipboardItemInput = new ClipboardItem({ 'image/png' : blob }); return navigator.clipboard .write([clipboardItemInput]) .then(() => true) .catch(() => false); } function downloadLink(name, href) { const a = document.createElement('a'); a.download = name; a.href = href; document.body.append(); a.click(); a.remove(); } // -- 复制/下载二维码的功能区域 - 结束 ---