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

「爱情、让人受尽委屈。」 2023-01-13 15:52 97阅读 0赞

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70][]

node下载qrcodejs2并引入

import QRcode from 'qrcodejs2'

设置一块区域显示图片

创建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
          })
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70]: /images/20221022/5109f5b86c74451295d90482efadcae4.png