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