在Vue中根据Url下载地址生成二维码展示在界面上-编程知识

在Vue中根据Url下载地址生成二维码展示在界面上

最近来了一个新需求，就是在网页页面上点击按钮不在是直接下载app安装包，需要支持手机扫码下载app，避免他们需要先从电脑上下载，然后传到微信，然后手机从微信上下载下来，得了，需求就是根据后端传递过来的Url请求地址，去生成一个二维码供手机去扫，扫了后完成下载。

引入依赖

由于在vue中我们不使用相关第三方库，我们就无法直接生成一个二维码，还是动态生成的，故而我们需要引入一个vue插件，也就是是qrcodejs2,由于它并非是一个Vue插件，故而我们可以通过以下几种方式将他来引入。

导入相关生成二维码的依赖，在vue中可以通过npm 引入

npm install qrcodejs2 --save-dev

直接引入

<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"></script>

利用引入的依赖生成二维码

在如下代码中，我们通过elment ui的按钮进行操作，后续的操作均是建立在这个按钮上进行的。

 <el-button @click="downloadapk" size="small"  type="primary">下载apk</el-button>

按钮我们有了，那么我们根据npm引入的相关依赖进行操作，在我们需要使用的页面直接引入相关依赖如下，记得我们通过npm引入的依赖，不在具体页面指定，那么系统是不会帮我们主动去引入的。

import QRCode from 'qrcodejs2';

vue界面上，我们定义几个全局变量方便我们使用：

export default {data() {return {qrCodeVisible: false, //默认弹窗关闭showQRCode:true, //默认显示二维码url: '', //后端传递过来的url地址};},methods:{//其他js方法，待补充}}

接下来，我们实现上述的按钮里边的js方法downloadapk

    downloadapk(){//从后端获取url地址，这个随你，无论你从后端获取什么样的格式，我只取url的地址就行了this.$axios.get('/dict/findUrl').then((response) => {this.url = response.data.data.url;//处理生成二维码的方法this.handleClickScan(this.url);}).catch((error) => {//请求异常，报错console.log('error:' + JSON.stringify(error))})},

处理生成二维码的handleClickScan

	handleClickScan(e){this.urlBath=e //获取传递过来的url地址this.qrCodeVisible = true; //展示弹窗// 生成二维码，异步进行this.$nextTick(function () {document.getElementById("qrCodeUrl").innerHTML = "";let qrCodeUrl= new QRCode("qrCodeUrl", {width: 240,height: 240,text: this.urlBath,colorDark: "#000",colorLight: "#fff",});});},

行，js基本上完善了，那么我们需要处理的是，点击下载按钮的弹出框问题了，我需要在用户点击按钮弹出后，展示二维码给用户扫码：

		<el-dialog   :visible.sync="qrCodeVisible" width="300px" :style="{ 'z-index': 1000 }" :modal="false"><div class="ScanImg"><!--展示二维码--><div class="ScanMa" id="qrCodeUrl"></div></div><!--直接下载按钮--><div class="btnupload" @click="downloadNow()"> 直接下载 </div></el-dialog>

为了方便使用，这里也将给出直接下载按钮，样式自己调，用户点击按钮就可以实现直接在页面上下载app.

    //直接下载apkdownloadNow(){const link = document.createElement('a')link.href = this.url;let fname = 'gdb.apk'link.setAttribute('download',fname)document.body.appendChild(link)link.click();document.body.removeChild(link);},

给出样式仅供参考，无实际意义。根据个人的情况进行调整。

.ScanDiao/deep/.el-dialog__body {padding: 5px 2px;
}
.ScanDiao/deep/.el-dialog__header {padding: 0px 120px 0px;color: #fff;
}
.ScanDiao/deep/.el-dialog__title {color: #ffffff;
}
.ScanDiao/deep/.el-dialog__headerbtn {top: 5px;font-size: 21px;
}
.ScanDiao/deep/.el-dialog__headerbtn .el-dialog__close {color: #fff;
}
.btnupload{width: 100px;height: 30px;line-height: 30px;margin: 0 auto;text-align: center;cursor: pointer;background-color: rgb(38, 133, 206);border-radius: 5px;color: #fff;margin-top: 22px;
}
.ScanMa{width: 100%;height: 100%;border: 4px solid #fff;
}
.ScanImg{position: relative;
}