链接生成二维码图片并下载；复制文本到剪切板； 直接下载img图片

1. 第一种情况将链接生成二维码图片并实现下载

效果图：

node下载qrcodejs2并引入

import QRcode from 'qrcodejs2'

设置一块区域显示图片

    <div class="qr-dialog">
      <div v-if="visible" id="qrcode" ref="qrcode" class="qrcode" />
      <div class="qr-button">
        <el-button @click="onDownload">下载</el-button>
      </div>
    </div>

创建QRcode

    createQRImage(url) {
      this.$nextTick(() => {
        new QRcode(this.$refs['qrcode'], {
          width: 182,
          height: 182,
          text: url
        })
      })
    }

监听模块，创建QRcode

  watch: {
    visible: {
      handler: function(newValue) {
        if (this.visible === true) {
          this.createQRImage(this.url)
        }
      },
      deep: true,
      immediate: true,
      imgUrl: ''
    }
  }

实现下载

    onDownload() {
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      const a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('img/png')
      console.log('a.href', a.href)
      a.download = '二维码'
      a.click()
    }

全部代码：

<template>
  <el-dialog
    title="二维码"
    :visible.sync="visible"
    :url.sync="url"
    :before-close="onClose"
    width="800px"
  >
    <div class="qr-dialog">
      <div v-if="visible" id="qrcode" ref="qrcode" class="qrcode" />
      <div class="qr-button">
        <el-button @click="onDownload">下载</el-button>
      </div>
    </div>
    <div class="link">
      <h3>播放链接</h3>
      <div class="url">{
   
   { url }}</div>
      <div class="btn"><el-button size="mini" @click="onDownload">点击复制</el-button></div>
    </div>
  </el-dialog>
</template>

<script>
import QRcode from 'qrcodejs2'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  watch: {
    visible: {
      handler: function(newValue) {
        if (this.visible === true) {
          this.createQRImage(this.url)
        }
      },
      deep: true,
      immediate: true,
      imgUrl: ''
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    createQRImage(url) {
      this.$nextTick(() => {
        new QRcode(this.$refs['qrcode'], {
          width: 182,
          height: 182,
          text: url
        })
      })
    },
    onDownload() {
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      const a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('img/png')
      console.log('a.href', a.href)
      a.download = '二维码'
      a.click()
    }
    // onCopyold() {
    //   const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
    //   const href = myCanvas[0].toDataURL('img/png')
    //   const input = document.createElement('input')
    //   input.value = href
    //   document.body.appendChild(input)
    //   console.log('input.value', input.value)
    //   input.select()
    //   document.execCommand('copy')
    // }
  }
}
</script>
<style lang="scss">
.qr-dialog {
  .qrcode {
    display: flex;
    justify-content: center;
    img {
      background-color: #f8f8f8;
      padding: 10px;
    }
  }
  .qr-button {
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .url-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
  }
}
.link {
  display: flex;
  justify-content: center;
  .url {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

2. 复制文本到剪切板

    onCopy() {
      var oInput = document.createElement('input')
      oInput.value = this.url
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$message({
        message: '复制成功！',
        type: 'success',
        showClose: true
      })
    }