vue引用QrCode生成二维码

最新推荐文章于 2025-07-03 08:42:49 发布

原创最新推荐文章于 2025-07-03 08:42:49 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #二维码 #QrCode

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种前后端结合的方法来生成并渲染二维码。通过使用QrCode插件，前端可以接收从后端获取的二维码链接，并将其转换为可视化的二维码图像。文章详细解释了安装插件、引入、设置渲染标签以及发送请求获取链接并生成二维码的过程。

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

后台生成二维码链接返回到前台，前台做个渲染。

1.npm install安装一下插件QrCode

2.引入

import QrCode from 'qrcode'

3.渲染二维码的标签

<canvas id="qrcode-canvas"></canvas>

4.向后台发送请求获取链接并在页面生成二维码

	let vm = this;
    var postData = {
            
    }
    vm.$http.post(baseUrl+'/pay/mergePayOrder/qrCode', qs.stringify(postData))
    	.then(function (res) {
         	var res = res.data;
             if(res.status == 1) {
             	var codeUrl = res.data.codeUrl; //二维码的链接
           		
                var canvas = document.getElementById('qrcode-canvas');//获取渲染二维码的标签
                QrCode.toCanvas(canvas, codeUrl, (error) => {
                	if (error) {
                       console.log(error)
                   	} else {
                        console.log('success')
                                }
                            })
                        }
                    })
                    .catch(function(err) {

                    })