Copy or download generated QR (vue-qrcode) code with VueJs

user_14143776 0
Viewed 2668

I use the plugin "vue-qrcode" to generate a qr code for my users to for a link to their public profile so they can share it e.g. on thei business card.

The Idea is now to give my users the possibility via a button to download the qr code and via another button to copy the qr code to the clipboard to make it easier to send it e.g. via mail (specially for the smartphone users).

Problem: I don't know how i can download or copy the qr code. Does anybody know to copy or download the qr code? Currently I use 'vue-clipboard2' to copy links etc. but it seems it can't copy images.

I use the below code to display the qr code on our site:

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

Thanks - Christian

vue.js qr-code copy image download
1 Answers

I figured it out. The solution looks like this:

TEMPLATE AREA:

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

FUNCITONS AREA:

// -- FUNCTIONS AREA TO COPY / DOWNLOAD QR CODE - END ---
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();
  }
  // -- FUNCTIONS AREA TO COPY / DOWNLOAD QR CODE - END ---
user_141437760
Related