使用VueJs复制或下载生成的二维码

Question

我使用插件"vue-qrcode"；为我的用户生成一个qr码，用于链接到他们的公共档案，以便他们可以共享，例如在我的名片上。

现在的想法是让我的用户可以通过一个按钮下载二维码，并通过另一个按钮将二维码复制到剪贴板，使其更容易发送，例如通过邮件发送(专门针对智能手机用户(。

问题：我不知道如何下载或复制二维码。有人知道复制或下载二维码吗？目前我使用"vue-clipboard2"来复制链接等，但它似乎无法复制图像。

我使用以下代码在我们的网站上显示二维码：

<template>
<qrcode-vue 
style = "cursor: pointer;" 
:value = "linkToProfile" 
size = 160 
level = "M"
:background = "backgroundcolor_qrcode"
:foreground = "color_qrcode"
></qrcode-vue>
</template>
<script>
import Vue from 'vue'
import QrcodeVue  from 'qrcode.vue'
Vue.component('qrcode-vue', QrcodeVue )
export default {
data: () => ({
linkToProfile: "http://www.example.com/johnDoe",
})
</script>

谢谢-基督教

Answer 1

我想明白了。解决方案如下：

模板区域：

<qrcode-vue 
id="qrblock"
:value = "linkToSki" 
size = 220
level = "M"
ref="qrcode"
></qrcode-vue>

功能区：

// -- FUNCTIONS AREA TO COPY / DOWNLOAD QR CODE - END ---
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();
}
// -- FUNCTIONS AREA TO COPY / DOWNLOAD QR CODE - END ---