vue 使用qrcodejs2插件实现二维码生成及二维码图片下载(小白篇)
1.首先下载插件
npm install qrcodejs2 --save
2. 引入
import QRCode from 'qrcodejs2'
3.代码实现如下:
<span class="QRCode_show" @click="handDownInage()">下载二维码</span>
<script>
import QrCode from "qrcode";
export default{
data() {
return {
txid:'',
qrcode: null,
pushUnitName:'',
uplinkTime:''
}
},
mounted() {
console.log('传过来的数据',this.row)
this.txid = this.row.txid
this.pushUnitName= this.row.pushUnitName
this.uplinkTime= this.row.uplinkTime
},
methods: {
//下载按钮
handDownInage() {
console.log("txid", this.txid);
let txid = this.txid;
if ((txid)) {
this.$nextTick(() => {
// 此时可以确认已经有ref对象了
let image = QrCode.toDataURL(txid);
image.then((res) => {
console.log("下载", res);
this.downloadImg(res);
});
});
}
},
//下载图片
downloadImg(value) {
console.log("下载图片1", this.pushUnitName, this.uplinkTime);
let pushUnitName = this.pushUnitName;
let uplinkTime = this.uplinkTime;
//实例化一个img对象
const img = new Image();
//设置img的图片路径
img.src = value;
//设置跨域解决
img.setAttribute("crossOrigin", "Anonymous");
//img加载完后处理
img.onload = function () {
//创建一个canvas对象
const canvas = document.createElement("canvas");
//把图片的宽度设为canves的宽度
canvas.width = 230;
//把图片的高度设为canves的高度
canvas.height = 230;
//创建一个2d画布
const ctx = canvas.getContext("2d");
// 将img中的内容画到画布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 将画布内容转换为Blob
canvas.toBlob((blob) => {
console.log("blob", blob);
// blob转为同源url
let blobUrl = window.URL.createObjectURL(blob);
// 创建a链接
const a = document.createElement("a");
a.href = blobUrl;
a.download = pushUnitName + uplinkTime;
// 触发a链接点击事件,浏览器开始下载文件
a.click();
});
};
},
}
}
</script>