vue + 生成下载成二维码

二维码
<div class='box' v-for="(item,index) in this.num" :key="item.key ">
<div :ref="forFile(index)" :id="forFile(index)" style="background-color:#fff;text align:center;width:200px;height:200px;float:left">
<div class='bode' >
<div :id="forId(index)"></div>
</div>

forFile(index){
return "image" +(index);
},
//循环生成的框二维码
   forId(index){
return "cardId" +index
},
生成二维码
   bindQRCode(){
   this.$nextTick(function () {
for(var i=0;i<this.num.length;i++){
var imgID='cardId'+i;
   console.log(imgID);
   document.getElementById(imgID).innerHTML = "";
   new QRCode(imgID, {
   text: this.num[i],
   width: 145,
   height: 145,
   colorDark: "#333333", //二维码颜色
   colorLight: "#ffffff", //二维码背景色
   correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
   })
}
})

console.log(this.num);
},

this.$nextTick作用：在下次dom更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获得更新后的dom

下载二维码：
单个：
downloadBase64(){
var qrcode = document.getElementById('imgID');//盒子
var img = qrcode.getElementsByTagName('img')[0];//图片
qrcode.οnlοad=function(){//base64的 src 在onload外为空
let imgUrl=img.getAttribute("src");
var link = document.createElement("a");//下载方式：创建a标签 src:文件路径 download:文件名
link.setAttribute("href",imgUrl);
link.setAttribute("download",'123.png');
link.click();
}
},

多个下载：

wmdown(){
for(let i=0;i<this.num.length;i++){
//写个dome来判断下载次数 ref动态绑定(在HTML代码中) 这里是循环获取dome
var aaa;
if(i=0){
aaa=this.$refs.image0[0];
}else if(i=1){
aaa=this.$refs.image0[0];
}else if(i=2){
aaa=this.$refs.image0[0];
}
html2canvas(aaa,{
backgroundColor: null? ? ?// 解决生成的图片有白边
}).then((canvas) => {
var nameZ;
nameZ=this.num[i]
let dataURL = canvas.toDataURL("image/png")
this.dataURL = dataURL;
var alink = document.createElement("a");
alink.href = this.dataURL;
alink.download = nameZ; //图片名
alink.click();
})
}
this.makeCard = false;
},

vue + 生成下载成二维码相关推荐

vue生成条形码和二维码并打印
文章目录前言一.生成条形码二.生成二维码三.效果图四.打印前言最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码使用 ...
vue生成自定义样式二维码
使用vue-qr生成自定义二维码 vue-qr具有自定义二维码背景.logo.实点颜色等特性,能够生成更炫酷的二维码. 文章目录使用vue-qr生成自定义二维码效果图安装使用部分参数说明 v ...
vue 生成条形码、二维码
条形码 1.安装 cnpm install jsbarcode --save 2.引入 import JsBarcode from 'jsbarcode' 3.二维码容器 <svg id=&qu ...
vue实现根据链接生成带logo二维码，并下载
第一步,下载插件 npm install vue-qr --save 第二步,页面中使用 <template><vue-qrref='Qrcode':logo-src="l ...
Android将apk转换成二维码提供给别人扫描并下载
这两天在网上查找了大量的资料,希望能够将我的Android的apk转换成二维码,提供给客户扫描并下载应用,查找了很久,都没有看到有合适的,他们说的都是要自己提供apk给后台,让后台帮忙弄一个下载链接, ...
图片二维码，如何将图片制作成二维码
想要将图片做成二维码? 其实很简单. 你只需要一个二维码生成器就能做到. 比如,这个业界小有名声的二维彩虹二维码生成器. 比如企业活动中,要展示多张图片:比如你想要将喜欢的插画作品保存并分享:比如你要 ...
ZPL 打印条码、二维码及小票（中文/汉字），生成条码、二维码图片【Asp.Net】-含示例代码
生成条码(图1).二维码(图2)图片及打印出二维码标签(图3)效果图1 图2 ...
如何将 Credly 中的数字徽章转成二维码
如何将 Credly 中的数字徽章转成二维码在 Credly 数字证书这一篇文章中要说过当完成 AWS Academy Cloud Foundations 课程后,可以申请一个结业证书徽章,已下逐 ...
【无标题】文档转成二维码添加到公众号文章（Word、Excel、PPT、PDF等）
有公众号的小伙伴应该都知道,公众号文章中并不支持直接添加附件.小熊也有自己经营的公众号,因公众号运营需要,经常需要在公众号推文中添加附件给粉丝们下载,曾试过很多种方式: ① 阅读原文跳转文件 ② 百度 ...

vue + 生成下载成二维码

vue + 生成下载成二维码相关推荐

最新文章

热门文章

vue + 生成 下载 成 二维码

vue + 生成 下载 成 二维码相关推荐

最新文章

热门文章

vue + 生成下载成二维码

vue + 生成下载成二维码相关推荐