vue创建二维码并下载

创建二维码

首先下载qrcanvas

npm install qrcanvas

引用

<template>
<div>
<el-dialog title="二维码" :visible.sync="dialogShow" width="360px" :wrapperClosable="false"
			:append-to-body="true" :modal-append-to-body="false">
			<el-container>
				<el-main>
					<div id="Qrcode" ref="Qrcode" class="share-qrcode" style="width:256px;margin:0 auto;" />
					<div class="qrcodeDownload">
						<el-button @click="downLoadQrcode" class="btn" type="primary">下载二维码</el-button>
					</div>
				</el-main>
			</el-container>
		</el-dialog>
		</div>
</template>
<script>
	import { qrcanvas } from 'qrcanvas'
	export default {
		data(){
			return{
				qrcode:'',
				dialogShow:false
			}
		},
		methods:{
			//下载照片
			downLoadQrcode() {
				let imgSrc, canvas;
				if (document.getElementById('Qrcode').childNodes[0]) {
					canvas = document.getElementById('Qrcode').childNodes[0]
					imgSrc = this.CanvasToImage(canvas).getAttribute('src')
					const alink = document.createElement('a')
					alink.href = imgSrc
					alink.download = 'Qrcode.png'
					alink.click()
				}
			},
			// canvas 转换成图片, 从canvas中提取图片image
			CanvasToImage(canvas) {
				var image = new Image()
				// 指定格式PNG
				image.src = canvas.toDataURL('image/png')
				return image
			},
			// 点击出现二维码
			popQrcode(id) {
				this.dialogShow = true	
				this.qrcode = ''
				this.$nextTick(() => {
					this.qrcode = qrcanvas({
						cellSize: 8,
						data: id,//传入的值
						effect: {
							round: 0.4
						},
						correctLevel: 'M',
						background: '#f5f5f5',
						padding: 12
					})
					// 判断是否有子节点，如果已经有则删除原有的，然后再新增子节点
					if (document.getElementById('Qrcode').childNodes[0]) {
						this.$refs.Qrcode.removeChild(document.getElementById('Qrcode').childNodes[0])
					}
					this.$refs.Qrcode.appendChild(this.qrcode)
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.qrcodeDownload{
		text-align: center;
		margin-top: 10px;
	 }
</style>