搜尋

首頁  >  問答  >  主體

使用VueJs複製或下載產生的QR(vue-qrcode)程式碼的替代方案

我使用外掛程式「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>

謝謝 - 克里斯蒂安

P粉294954447P粉294954447415 天前860

全部回覆(1)我來回復

  • P粉023326773

    P粉0233267732023-11-06 12:21:45

    我找到了解決方法。解決方案如下:

    模板區域:

    <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();
      }
      // -- 复制/下载二维码的功能区域 - 结束 ---

    回覆
    0
  • 取消回覆