In the vue

One: Install qrcode-vue components

npm install --save qrcode.vue import QrcodeVue from 'qrcode.vue'; <qrcode-vue :value="value" :size="size" level="H" id="qrcode"></qrcode-vue> Component props: Value: link the size: size (px) level: level of fault tolerance Specific reference: https://github.com/scopewu/qrcode.vue/blob/HEAD/README-zh_cn.mdCopy the code

In a regular project

Qrcode.js

Download: davidshimjs. Making. IO/qrcodejs/introduction:

2: call

// let qrCode = new qrCode (document.getelementById ('qrcode'), 'your content'); // let qrcode = new qrcode (qrcode, {text: 'your content', width: 256, height: 256, colorDark: '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); // Use API qrcode.clear(); Qrcode.makecode ('new content'); // Set the content of the QR codeCopy the code

Specific reference: davidshimjs. Making. IO/qrcodejs /

Click to download the QR code

SaveImg () {// Find the canvas tag
      let cvs= document.getElementById('qrcode').getElementsByTagName('canvas');
      // Create an A tag node
      let a = document.createElement("a")
       // Set the href attribute of the A tag (convert canvas to PNG image)
      a.href = cvs[0].toDataURL('image/png').replace('image/png'.'image/octet-stream')
      // Set the name of the downloaded file
      a.download = "qrcode.png"
      / / click
      a.click()
  }
Copy the code