suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Alternative zum Kopieren oder Herunterladen des generierten QR-Codes (vue-qrcode) mit VueJs

Ich verwende das Plugin „vue-qrcode“, um QR-Codes zu generieren, damit Benutzer QR-Codes für ihre öffentlichen Profillinks generieren können, damit sie diese auf ihren Visitenkarten teilen können.

Die Idee besteht nun darin, dem Benutzer die Möglichkeit zu geben, den QR-Code über eine Schaltfläche herunterzuladen und den QR-Code über eine weitere Schaltfläche in die Zwischenablage zu kopieren, um den Versand per E-Mail zu vereinfachen (insbesondere für Smartphone-Benutzer).

Das Problem ist: Ich weiß nicht, wie ich den QR-Code herunterladen oder kopieren kann. Weiß jemand, wie man den QR-Code kopiert oder herunterlädt? Derzeit verwende ich „vue-clipboard2“, um Links usw. zu kopieren, kann aber anscheinend keine Bilder kopieren.

Ich verwende den folgenden Code, um den QR-Code auf unserer Website anzuzeigen:

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

Danke – Christlich

P粉294954447P粉294954447415 Tage vor859

Antworte allen(1)Ich werde antworten

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

    Antwort
    0
  • StornierenAntwort