vue生成二维码并下载二维码

迈不过友情╰ 2023-02-14 15:33 225阅读 0赞

## 首先安装一下面这个插件 ##

cnpm install vue-qr -S

**接下来在需要生产并下载二维码的页面引入**

import VueQr from 'vue-qr'

**并在components中注册为组件**

components: {
        VueQr // 二维码组件
    },
    data() {
    	return {
    	        config: { // 二维码配置
                    logo: '',
                    value: ''
                }
    	}
    },
    methods: {
    	// 点击触发下载二维码
    	downQRImg (data, type) {
    	    this.config = {
    	        logo: '二维码中心logo',
    	        value: '二维码内容'
    	    }
    	    let timer = setInterval(() => {	// 做一个定时器防止二维码未生成时候就下载而获取不到二维码地址
    	        if (this.$refs.Qrcode.$el.src) {
    	            const iconUrl = this.$refs.Qrcode.$el.src	// 二维码地址
    	            let a = document.createElement('a')
    	            let event = new MouseEvent('click')
    	            a.download = data.TenantName	// 二维码名称
    	            a.href = iconUrl
    	            a.dispatchEvent(event)
    	            clearInterval(timer)
    	            this.$message.success('二维码已下载')
    	            this.config = {
    	                logo: '',
    	                value: ''
    	            }
    	        }
    	    }, 100)
    	},
    }

**在html代码里面加入以下代码**

<vue-qr
        id="qrcodeimg"
        ref="Qrcode"
        style="display:none"
        :logo-src="config.logo"
        :text="config.value"
        :size="200"
        :margin="0"
    />

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue生成二维码

前言本次将教大家如何只通过vue前端快速的生成二维码步骤安装依赖通过命令 npm install qrcodejs2 安装二维码生成的依

╰半夏微凉°/ 2024年04月01日 09:12/ 0 赞/ 106 阅读

相关生成二维码并下载二维码（兼容IE等浏览器）

由于项目需求要点击按钮后，生成二维码并把二维码下载到本地，于是找了大量资料都没能实现兼容IE浏览器的方法，最后终于发现`file-saver`能完美解决这个问题首先在`in

川长思鸟来/ 2023年02月17日 03:57/ 0 赞/ 24 阅读

相关 vue中生成二维码

先安装插件： npm install --s qrcode 引入插件： import QRCode from "qrcode"; //引入生成二维码插件页面中canv

系统管理员/ 2023年02月17日 03:48/ 0 赞/ 35 阅读

相关 vue生成二维码并下载二维码

首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'v

迈不过友情╰/ 2023年02月14日 15:33/ 0 赞/ 226 阅读

相关 Vue 生成二维码

[https://www.cnblogs.com/TreeCTJ/p/12736833.html][https_www.cnblogs.com_TreeCTJ_p_127368

灰太狼/ 2022年11月27日 03:22/ 0 赞/ 247 阅读

相关生成二维码

相关博客：[统一返回结果][Link 1] 创建SpringBoot项目  <dependency> <gr

傷城~/ 2022年10月20日 13:55/ 0 赞/ 378 阅读

相关 swift生成二维码，扫描二维码

～～～写在前面的话～～～我之前打算做一个APP，然后把电话号码生成二维码或者条形码，用手机扫描，这样，就不用担心会输入错误电话号码了。在下面是实现的扫描二维码的功能

墨蓝/ 2022年09月25日 13:19/ 0 赞/ 560 阅读

相关 vue生成二维码并下载

vue生成二维码图片，这里使用的是qrcode.js 这个插件 1、下载插件 npm install --save qrcodejs2 2、组件内使用 <tem

素颜马尾好姑娘i/ 2022年09月06日 00:12/ 0 赞/ 243 阅读

相关生成二维码

一个命名空间 namespace BarCode \{ public static class TwoDimensionCode \{

悠悠/ 2022年08月05日 01:17/ 0 赞/ 411 阅读

相关二维码生成

maven依赖  <dependency> <groupId>com.google.zxing</groupId>

悠悠/ 2021年12月10日 15:39/ 0 赞/ 561 阅读