我使用外掛程式「vue-qrcode」為使用者產生二維碼，以便為他們的公開個人資料連結產生二維碼，以便他們可以在名片上分享。
現在的想法是透過一個按鈕讓用戶有可能下載二維碼，並透過另一個按鈕將二維碼複製到剪貼簿，以便更容易透過郵件發送（特別是對於智慧型手機用戶）。
問題是：我不知道如何下載或複製二維碼。有人知道如何複製或下載二維碼嗎？目前我使用“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>
謝謝 - 克里斯蒂安
我找到了解決方法。解決方案如下：
模板區域：
<qrcode-vue id="qrblock" :value = "linkToSki" size = 220 level = "M" ref="qrcode" ></qrcode-vue>功能區：
// -- 复制/下载二维码的功能区域 - 结束 --- 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(); } // -- 复制/下载二维码的功能区域 - 结束 ---