我使用外掛程式「vue-qrcode」為使用者產(chǎn)生二維碼，以便為他們的公開(kāi)個(gè)人資料連結(jié)產(chǎn)生二維碼，以便他們可以在名片上分享。
現(xiàn)在的想法是透過(guò)一個(gè)按鈕讓用戶有可能下載二維碼，並透過(guò)另一個(gè)按鈕將二維碼複製到剪貼簿，以便更容易透過(guò)郵件發(fā)送（特別是對(duì)於智慧型手機(jī)用戶）。
問(wèn)題是：我不知道如何下載或複製二維碼。有人知道如何複製或下載二維碼嗎？目前我使用“vue-clipboard2”來(lái)複製連結(jié)等，但似乎無(wú)法複製圖像。
我使用下面的程式碼在我們的網(wǎng)站上顯示二維碼：
<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>
謝謝 - 克里斯蒂安
1
0
0
我找到了解決方法。解決方案如下：
模板區(qū)域：
<qrcode-vue
id="qrblock"
:value = "linkToSki"
size = 220
level = "M"
ref="qrcode"
></qrcode-vue>
功能區(qū)：
// -- 復(fù)制/下載二維碼的功能區(qū)域 - 結(jié)束 ---
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();
}
// -- 復(fù)制/下載二維碼的功能區(qū)域 - 結(jié)束 ---
