Alternative pour copier ou télécharger le code QR (vue-qrcode) généré à l'aide de VueJs

Question

J'utilise le plugin "vue-qrcode" pour générer des codes QR permettant aux utilisateurs de générer des codes QR pour leurs liens de profil public afin qu'ils puissent les partager sur leurs cartes de visite.

Maintenant, l'idée est de donner à l'utilisateur la possibilité de télécharger le code QR via un bouton et de copier le code QR dans le presse-papier via un autre bouton pour faciliter l'envoi par mail (notamment pour les utilisateurs de smartphones).

Le problème est le suivant : je ne sais pas comment télécharger ou copier le code QR. Est-ce que quelqu'un sait comment copier ou télécharger le code QR ? Actuellement, j'utilise "vue-clipboard2" pour copier des liens, etc. mais je n'arrive pas à copier des images.

J'utilise le code suivant pour afficher le code QR sur notre site internet :

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

Merci - Chrétien

Answer 1

J'ai trouvé une solution. La solution est la suivante :

Zone du modèle :

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

Domaine fonctionnel :

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