vue2+qrcodejs2实现生成和下载二维码

空空

已于 2024-07-25 00:15:39 修改

阅读量92

点赞数 1

分类专栏： vue2 qrcodejs2 文章标签： vue.js 前端 javascript

于 2024-07-25 00:13:32 首次发布

本文链接：https://blog.csdn.net/weixin_56119955/article/details/140676164

版权

vue2 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

qrcodejs2

1 篇文章 0 订阅

订阅专栏

安装qrcodejs

npm install qrcodejs2

引入

import QRCode from 'qrcodejs2'

代码
html部分

<div class="qr-code">
  <div id="qrcode" ref="qrCodeImage"></div>
    <!-- 作为下载二维码使用 -->
    <a ref="downLoadImgUrl" style="display: none"></a>
</div>
<el-button type="info" @click="downQrcodeImg">下载二维码</el-button>

js部分

// 生成二维码
getCode() {
    document.getElementById('qrcode').innerHTML = '' // 防止重复生成二维码
    new QRCode(this.$refs.qrCodeImage, {
        text: 'http://xxxxx', // 需要变成二维码的文本
        width: 200,
        height: 200,
        colorDark: '#333', // 二维码颜色
        colorLight: '#fff', // 二维码背景颜色
        correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
    });
    let qrcodeCanvas = (this.$refs.qrCodeImage.getElementsByTagName('canvas'))[0]
    this.qrcodeImgUrl = qrcodeCanvas.toDataURL('image/png'); // 作为下载图片资源
},
// 下载二维码
downQrcodeImg() {
    let downloadLink = this.$refs.downLoadImgUrl;
    downloadLink.setAttribute('href', this.qrcodeImgUrl);
    downloadLink.setAttribute(
        'download',
        `二维码_${new Date().getTime()}.png`
    );
    downloadLink.click();
    URL.revokeObjectURL(downloadLink.href);
},

完整代码

<template>
    <div class="qr-code">
        <div id="qrcode" ref="qrCodeImage"></div>
        <!-- 作为下载二维码使用 -->
        <a ref="downLoadImgUrl" style="display: none"></a>
    </div>
    <el-button type="info" @click="downQrcodeImg">下载二维码</el-button>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    data() {
        return {
            qrcodeImgUrl: '',
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        // 生成二维码
        getCode() {
            document.getElementById('qrcode').innerHTML = '' // 防止重复生成二维码
            new QRCode(this.$refs.qrCodeImage, {
                text: 'http://xxxxx', // 需要变成二维码的文本
                width: 200,
                height: 200,
                colorDark: '#333', // 二维码颜色
                colorLight: '#fff', // 二维码背景颜色
                correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
            });
            let qrcodeCanvas = (this.$refs.qrCodeImage.getElementsByTagName('canvas'))[0]
            this.qrcodeImgUrl = qrcodeCanvas.toDataURL('image/png'); // 作为下载图片资源
        },
        // 下载二维码
        downQrcodeImg() {
            let downloadLink = this.$refs.downLoadImgUrl;
            downloadLink.setAttribute('href', this.qrcodeImgUrl);
            downloadLink.setAttribute(
                'download',
                `二维码_${new Date().getTime()}.png`
            );
            downloadLink.click();
            URL.revokeObjectURL(downloadLink.href);
        },
    }
}
</script>