vue根据链接生成二维码并且下载保存二维码

下载依赖

cnpm i QRCode --save

源代码

<template>
    <div>
      <div class="page">
        <x-header  class="headerTop" >
          漫画
          <a slot="right" @click="goto('/myCaricature')">
            推广记录
          </a>
        </x-header>
        <div class="img">
         <!-- <img src="http://www.baidu.com" />-->
          <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
          <div id="down" style="display: none;"></div>
        </div>
        <div class="bottom">
          <div >
            <span @click="savePic">保存二维码</span></div>
          <div>
            <span @click="copyLink">复制链接</span></div>
          </div>
        </div>
        <div class="VipBlank" style="height: 10rem;">
        </div>
      </div>
</template>

<script>
  import QRCode from 'qrcode'
  import {XHeader,ToastPlugin} from 'vux'
  import {getExtensionCode} from '../../api'


    export default {
      data(){
        return{
          extensInfo:[]
        }
      },
      components: {
          XHeader
      },mounted() {
        this.getExtensionCode()
      },methods:{
        async getExtensionCode(){

          const params = {
            'type':'1'
          }

          const  result = await getExtensionCode(params);
          if(result.retCode==='1'){
            this.extensInfo = result
          }

        },
        //保存图片
        savePic(){
          console.log('-----')

          QRCode.toDataURL(this.extensInfo.extensionUrl)
            .then(url => {
              var qrbox = document.querySelector("#down");
              const img = new Image();
              img.src=url;
              qrbox.appendChild(img);

              var a = document.createElement("a");
              a.href = img.src;
              a.download = '文件名称';
              a.click();


            })
            .catch(err => {
              console.error(err)
            })
        },
        copyLink(){
		//生成二维码  this.extensInfo.extensionUrl为链接地址
          this.$copyText(this.extensInfo.extensionUrl).then( (e) =>{
            this.$vux.toast.text('复制成功', 'middle')
          },  (e) => {
            this.$vux.toast.text('复制失败,请重新点击保存', 'middle')
          })
        }

      },watch:{
        extensInfo(val){
          QRCode.toDataURL(this.extensInfo.extensionUrl)
            .then(url => {
              var qrbox = document.querySelector("#qrcode");
              const img = new Image();
              img.src=url;
              qrbox.appendChild(img);

              var a = document.createElement("a");
              a.href = img.src;

            })
            .catch(err => {
              console.error(err)
            })
        }
      },
    }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }

  .header{
    width: 100%;
    height: 4rem;
    background-color: #000000;
  }
  .header> .content{
    text-align: center;
  }
  .header>.back{
    position: relative;
    top: 1.3rem;
    left: 1rem;
    color: #D5B771
  }
  .header >.content .my{
    line-height: 1.4rem;
    color: #D5B771 ;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .rem{
    position:absolute ;
    color: #D5B771;
    left: 83%;
    top:1.5rem;
    font-size: .8rem;
  }
  .bottom{
    position:fixed;
    width: 100%;
    height: 10%;
    bottom:0rem;
    background-color:#4B4B4B;

  }
  .page >.img{
    width: 100%;

    position: fixed;
  }
  .page>.img img{
    width: 100%;
    background-repeat: no-repeat;

  }
  .bottom  div{
    height: 100%;
    text-align: center;
    display: inline-block;
    width: 49%;
    line-height: 5rem;
    color: #D5B771;

  }
  .bottom div:not(:last-child){
    border-right:.1rem solid  white
  }
</style>