vue 生成二维码并下载到本地

最新推荐文章于 2024-09-02 11:37:00 发布

维他命Coco

最新推荐文章于 2024-09-02 11:37:00 发布

阅读量423

点赞数

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45534301/article/details/134855412

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前记得项目提到过生成二维码功能，后来是后端生成的，今天有时间去看了一下前端生成二维码的过程

1.下载qrcode包
npm i qrcode
2.引入到文件中
import QrCode from 'qrcode'
3.使用

<template>
	<div>
		<!-- 生成二维码并下载到本地 -->
		<!-- 如果想要二维码打开一个链接直接将文本内容设置成也页面链接即可，微信扫码可以直接判断链接 -->
		<canvas ref="canvas" id="myCanvas"></canvas>
		<button @click="savePic">保存</button>
	</div>
</template>

<script>
import qrCode from 'qrcode'
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			qrCode.toCanvas(this.$refs.canvas, 'https://www.baidu.com', {
        width: 150,
        margin: 1
      }, (error) => {
        if (error) {
          console.error(error)
        } else {
          console.log('QR code generated successfully.')
        }
      })
		},
		methods: {
			init() {
				var canvas = document.getElementById('tutorial');
				//获得 2d 上下文对象
				var ctx = canvas.getContext('2d');
				
			},
			savePic() {
				let qrCodeCanvas = document.getElementById('myCanvas')
				let a = document.createElement("a");
				a.href = qrCodeCanvas.toDataURL("image/url");
				a.download = `【1111】二维码.png`;
				a.click();
			}

		}
	}
</script>

<style>
</style>