Alternatif untuk menyalin atau memuat turun kod QR (vue-qrcode) yang dijana menggunakan VueJs

Question

Saya menggunakan pemalam "vue-qrcode" untuk menjana kod QR untuk pengguna menjana kod QR untuk pautan profil awam mereka supaya mereka boleh berkongsi pada kad perniagaan mereka.

Kini ideanya adalah untuk memberi pengguna kemungkinan memuat turun kod QR melalui butang dan menyalin kod QR ke papan keratan melalui butang lain untuk memudahkan penghantaran melalui mel (terutama untuk pengguna telefon pintar).

Masalahnya ialah: Saya tidak tahu cara memuat turun atau menyalin kod QR. Adakah sesiapa tahu cara menyalin atau memuat turun kod QR? Pada masa ini saya menggunakan "vue-clipboard2" untuk menyalin pautan dan lain-lain tetapi nampaknya tidak dapat menyalin imej.

Saya menggunakan kod berikut untuk memaparkan kod QR di laman web kami:

<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>

Terima kasih - Kristian

Answer 1

Saya jumpa penyelesaian. Penyelesaiannya adalah seperti berikut:

Kawasan templat:

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

Kawasan berfungsi:

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