Generate QR code
There are two ways in vue: qrcode、vue-qr
I am using the first qrcode here
1. Installation
npm install --save qrcodejs2
Two, the introduction
import QRCode from 'qrcodejs2'
<div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
creatQrCode () {
return new QRCode(this.$refs.qrCodeUrl, {
text: 'https://vant-ui.github.io/vant/v2/#/zh-CN/checkbox', // 需要转换为二维码的内容
width: 132,
height: 132,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
mounted() {
this.creatQrCode();
},
In this way, our QR code can be displayed
Download QR code
downCard () {
// 先找到canvas节点下的二维码图片
const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
const img = document.getElementById('qrcode').getElementsByTagName('img')
// 创建一个a节点
const a = document.createElement('a')
// 设置a的href属性将canvas变成jpg格式
const imgURL = myCanvas[0].toDataURL('image/jpg')
const ua = navigator.userAgent
if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且 windows系统 情况下 才执行;
var bstr = atob(imgURL.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'jpg')
} else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
const blob = this.base64ToBlob(imgURL); // new Blob([content]);
const evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
a.download = ' '; // 下载图片名称,如果填内容识别不到,下载为未知文件,所以我这里就不填为空
a.href = URL.createObjectURL(blob);
a.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
}));
} else { // 谷歌兼容下载
img.src = myCanvas[0].toDataURL('image/jpg')
a.href = img.src
// 设置下载文件的名字
a.download = this.rowInfo.title + '二维码';
// 点击
a.click();
this.$message({
message: '下载成功',
type: 'success'
});
}
},