转存 vue 生成二维码并下载

转存 vue 生成二维码并下载

1、下载插件

npm install --save qrcodejs2

2、引入

const QRCode = require("qrcodejs2")

3、组件使用

<template>
    <div class="qr_code">
        <div style="display: flex;align-items: center">
            地址：<Input id="text" type="text" v-model="urlx" style="width:400px"/><br/>
            <Button style="margin: 0 10px;" type="primary" @click="getMadeQrCode">生成</Button>
            二维码名称：<Input type="text" v-model="qrCodeName" style="width:200px;"/><br/>
            <Button style="margin-left: 10px" type="primary" @click="downloadQrCode">下载</Button>
        </div>
        <div id="qrcode" ref="qrcodeU" style="width:200px; height:200px; margin-top:15px;"></div>
    </div>
</template>

4、生成二维码

//二维码生成
async getMadeQrCode() {
    
    
     document.getElementById('qrcode').innerHTML = ''; //生成前先清除上一个
     let qrcode = new QRCode(this.$refs.qrcodeU, {
    
    
         text: this.urlx,//二维码包含的信息
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
     });
}

传送门： vue自动生成二维码并下载打印到本地…