二维码生成和下载

丶凡人

于 2021-05-28 10:19:06 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

文章标签： css vue.js

本文链接：https://blog.csdn.net/Devil678/article/details/117353843

本文介绍了如何通过npm安装qrcode库，并在JavaScript中导入和使用qrcodejs2生成二维码。在HTML中创建二维码展示区域，并提供了一个下载二维码的按钮，点击后利用canvas将二维码转换为PNG图片并进行下载。此外，还展示了如何在Vue中实现这一功能，包括在data中定义二维码变量和在methods中定义生成和下载的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，npm命令下载qrcode

npm install --save 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() {
	console.log(document.getElementById('qrcode')   可以改成   this.$refs.qrCodeDiv)
           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",
          })
      },
}