# qrcode.vue
vue中使用vue-qrcode生成二维码
```
npm install --save qrcode.vue
npm i qrcodejs2
getBlob(base64) {
const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
const byteString = atob(base64.split(',')[1]); // base64 解码
const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
const intArray = new Uint8Array(arrayBuffer); // 创建视图
for (let i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: mimeString,
});
},
savePicture(Url = this.qrcodeUrl) {
const blob = new Blob([''], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = Url;
// eslint-disable-next-line prefer-destructuring
a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0];
const e = document.createEvent('MouseEvents');
e.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null,
);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
},
_qrcode(url) {
const div = document.createElement('div');
// eslint-disable-next-line new-cap
const code = new QRCode(div, {
text: url,
width: 500,
height: 500,
colorDark: '###000000',
colorLight: '###ffffff',
correctLevel: QRCode.CorrectLevel.L,
});
// 这里如果需要在页面上展示的话，就将div节点给添加到dom树上去；node.appendChild(div)
const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64
const base64Text = canvas.toDataURL('image/png');
const blob = this.getBlob(base64Text); // 将base64转换成blob对象
return window.URL.createObjectURL(blob);
},
```
# vue-qrcode
```
//1，引入，
import VueQrcode from '@xkeshi/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);
//2，使用：
<div id="qrcode">二维码位置</div>
<qrcode v-if="code" :value="code" :options="{ size: 200 }"></qrcode>
data(){
return:{
code:''
}
}
methods:{
setCode(){
setTimeout(()=>{
this.code='https://www.baidu.com'
},3000)
}
},
mounted(){
this.setCode()
}
```
