vue用QrCode 插件根据内容（网址、文本）生成二维码

最新推荐文章于 2025-05-07 21:15:48 发布

原创最新推荐文章于 2025-05-07 21:15:48 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客介绍了如何在JavaScript中利用qrcode库动态生成二维码，并将其渲染到canvas元素上。首先，通过npm安装qrcode插件，然后在代码中导入并使用QrCode.toCanvas方法，将指定URL转换为二维码图像。如果生成过程出现错误，错误信息会被记录，否则会将canvas转换为data URL并显示二维码。

代码

<img :src="ceshiurl" alt="" />

装QrCode插件（概率安装失败，失败的话就多装几次）

//安装
npm install qrcode -S 
//安装结束

import QrCode from 'qrcode'
//需要引入上述代码块
export default {
	data() {
    	return {
	    	ceshiurl: '',
    	}
	created() {
		this.ces()
	}
  	methods: {
  		ces(){
			var url = 'https://www.baidu.com/'
			let canvas = document.createElement('canvas')
			canvas.width = '100%'
			canvas.height = '100%'
			QrCode.toCanvas(canvas, url, (error) => {
				if (error) {
					console.log(error)
					this.ceshiurl = error
				} else {
					this.ceshiurl = canvas.toDataURL('image/jpeg')
					console.log(canvas.toDataURL('image/jpeg'))
				}
			})
	  	}
	}
}