vue实现qrcode下载二维码

后台返回：

1，npm命令下载qrcode

(1)在项目文件夹中

npm install --save qrcode

(2)或在全局中安装

npm install -g qrcode

2，引入

import QRCode from 'qrcodejs2'  // 引入qrcode

3，在HTML中引入

     <!-- 二维码 --><div><div style="width: 148px;">二维码</div><div><div id="qrcode"></div><div><el-button @click="downLoad" class="nowBtn">立即下载</el-button></div></div></div>

4，在data中定义

  data() {return {// 二维码qrCode: ''}}

5，在methods中

methods: {// 获取getDeviceInfo() {this.getQrCode();}downLoad() {let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');let a = document.createElement('a')a.href = myCanvas[0].toDataURL('image/png');a.download = '二维码';a.click()this.$message({message: "正在进行下载保存",type: 'success'})},getQrCode() {let qrcode = new QRCode('qrcode', {width: 132,height: 132,text: this.model.qrCode, // 二维码地址colorDark: "#000",colorLight: "#fff",})},
}

vue实现qrcode下载二维码相关推荐

vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue 动态生成下载二维码
菜花记录 vue项目如何动态生成一个下载二维码项目中二维码动态配置好下载链接,现场直接修改配置就可以调试第一步先直接在终端下载vue插件 npm install vue-qriously --sa ...
vue+element+qrcode 生成二维码
今天做项目遇到了一个需求,就是管理后台生成签到的二维码,app端扫码获取培训班.班级.课程等等,然后就想到了qrcode. vue项目使用qrcodejs2生成二维码 1,导入第三方插件 npm in ...
vue引用QrCode生成二维码
需求:后台生成二维码链接和邀请码返回到前台,前台渲染生成二维码 1.安装 npm i qrcode 2.引入 import QRCode from "qrcode"; 3.渲染二维 ...
Vue3项目生成并下载二维码，关于vue-qr.vue与qrcode.vue插件之间的区别
1.vue-qr.vue与qrcode.vue大致区别 vue-qr.vue:体积较大,大概4M左右,可以给二维码添加中心logo,生成二维码为img标签,可下载 qrcode.vue:体积较小,不能 ...
Vue生成带图片logo以及文字的二维码组件，可下载二维码为图片，附组件调用代码--核心qrcode
目录 1.初始化qrcode 2.二维码生成以及下载组件代码可以自己控制是否生成logo以及文字说明 3.父页面调用组件代码 1.初始化qrcode cnpm install --save qrco ...
记录使用QRCode 显示并下载二维码图片
记录使用QRCode 生成二维码项目安装qrcode 命令:npm install --save qrcodejs2 引入 import QRCode from 'qrcodejs2' 后端提供qr ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
【Vue+Java】前后端联动生成下载二维码
目录指引背景运用场景环境丑话说在前前端部分通过axios请求传参二次封装axios.create方法定义download方法,通过axios进行传参前端vue页面方法 HTML部分按 ...

vue实现qrcode下载二维码

1，npm命令下载qrcode

(1)在项目文件夹中

(2)或在全局中安装

2，引入

3，在HTML中引入

4，在data中定义

5，在methods中

vue实现qrcode下载二维码相关推荐

最新文章

热门文章