第一个功能:当前页面中显示二维码
第一:安装
npm i qrcodejs2 --save
第二步:当前页面使用
<div id="qrcode" class="erweima" ref="qrcode"></div>
第三步:JS
<script type="text/javascript"> //vue使用qrcode插件将后端返回的二维码字符串生成二维码 import QRCode from 'qrcodejs2' export default { data() { return { qrcode : '', qr: '', } }, mounted() { this.MyCode() }, methods: { // 我的数据码 MyCode() { this.$api.POSTTwo(this.$url.MyCode + localStorage.getItem('token'), '', (res) => { this.password = res.Data; // this.qrcode = res.Data; //具体代码 this.qr = new QRCode('qrcode', { text: 'userCode=' + this.password, width: 160, height: 160, colorDark: "#000000", colorLight: "#ffffff", correctLevel : QRCode.CorrectLevel.H }) }) }, } } </script>
第二个功能:当前列表每条数据都包含各自的二维码,点击下载可以下载彼此的二维码
第一步:安装
npm i qrcodejs2 --save
第二步:引入
//vue使用qrcode插件将后端返回的二维码字符串生成二维码 import QRCode from 'qrcodejs2'
第三步:页面中使用
<el-form-item label="二维码:" v-if="dialogStatus == 'seeDetail'"> <div id="qrcode" class="qrcode" ref="qrCodeUrl"></div> <!--下载功能--> <el-button style="margin-top: 20px;" size="mini" @click="downloadQRCode(temp.LabelName,temp.EndTime)">二维码下载</el-button> </el-form-item>
第四步:JS
// 点击用户详情时 seeDetail(row) { this.dialogStatus = 'seeDetail' console.log('打印row下的二维码字符串', row.LabelCode) //防止生成多个。(每次生成之前,把上一次的DOM节点的二维码删除掉,然后再添加新生成的二维码) this.$nextTick(function() { let dom = document.getElementById("qrcode"); while (dom.firstChild) { dom.removeChild(dom.firstChild); } //调用字符串生成二维码的方法 this.creatQrCode(row.LabelCode) }); }, //字符串生成二维码的方法 creatQrCode(LabelCode) { console.log('获取到的code', LabelCode) var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: LabelCode, // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, //下载二维码图片 downloadQRCode(LabelName, EndTime) { let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas"); let a = document.createElement("a"); a.href = myCanvas[0].toDataURL("image/png"); a.download = LabelName+'--'+EndTime; //图片名(自动匹配标签名称+标签截止时间) a.click(); // console.log('打印下载', LabelName, EndTime) },