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

一、安装生成二维码插件qrcode.js

要是项目框架有的,就用项目的,只要找到canvas

把二维码插件封装下,可以重复利用

<template>
	<div>
		<div id="qrcode"></div>
	</div>
</template>
 
<script>
	// 二维码
	import QRCode from 'qrcodejs2' // 引入qrcode
	export default {
		name: 'test',
		mounted() {
			this.qrcode();
		},
		props: {
			width: {
				type: Number,
				default () {
					return 200
				}
			},
			height: {
				type: Number,
				default () {
					return 200
				}
			},
			// 二维码地址
			url: {
				type: String,
				default () {
					return ''
				}
			}
		},
		methods: {
			qrcode() {
				let qrcode = new QRCode('qrcode', {
					width: this.width,
					height: this.height,
					text: this.url,
					colorDark: "#000",
					colorLight: "#fff",
				})
			},
		}
	}
</script>
<style scoped>
	#qrcode {
		display: inline-block;
	}
 
	#qrcode img {
		width: 132px;
		height: 132px;
		background-color: #fff;
		padding: 6px;
	}
</style>

三、应用于页面：

<template>
	<el-dialog :title="dialogTit" :visible.sync="dialogShow" width="360px" :wrapperClosable="false"
		:append-to-body="true" :modal-append-to-body="false">
		<el-container>
			<el-main>
				<div class="qrcodeCon">
					<qrcode id="qrcode" :url="form.w_type_urlstring"></qrcode>
				</div>
				<div class="qrcodeUrl">{{form.w_type_urlstring}}</div>
				<div class="qrcodeDownload">
					<el-button @click="downloadClick">下载二维码</el-button>
				</div>
			</el-main>
		</el-container>
	</el-dialog>
</template>
 
<script>
	import qrcode from '@/components/Qrcode'
 
	export default {
		data() {
			return {
				// 对话框
				dialogTit: '二维码',
				dialogShow: false,
				form: {},
				formLabelWidth: '100px',
 
				// 二维码url
				url: '',
			};
		},
		components: {
			qrcode,
		},
		mounted: function() {
			var _this = this;
			_this.$nextTick(() => {
				_this.$on('handleQrcode', function(row) {
					_this.dialogShow = true;
					_this.form = row;
				});
			});
		},
		methods: {
			// 下载二维码
			downloadClick() {
				// 先找到canvas节点下的二维码图片
				const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
				const img = document.getElementById('qrcode').getElementsByTagName('img')
				// 创建一个a节点
				const a = document.createElement('a')
				// 设置a的href属性将canvas变成png格式
				const imgURL = myCanvas[0].toDataURL('image/jpg')
				const ua = navigator.userAgent
				if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
					var bstr = atob(imgURL.split(',')[1])
					var n = bstr.length
					var u8arr = new Uint8Array(n)
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n)
					}
					const blob = new Blob([u8arr])
					window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
				} else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
					const blob = this.base64ToBlob(imgURL); //new Blob([content]);
					const evt = document.createEvent("HTMLEvents");
					evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
					a.download = ' '; //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
					a.href = URL.createObjectURL(blob);
					a.dispatchEvent(new MouseEvent('click', {
						bubbles: true,
						cancelable: true,
						view: window
					}));
				} else { // 谷歌兼容下载
					img.src = myCanvas[0].toDataURL('image/jpg')
					a.href = img.src
					// 设置下载文件的名字
					a.download = this.form.title + this.form.w_type_title + '二维码';
					// 点击
					a.click();
 
					this.$message({
						message: '下载成功，已保存到桌面',
						type: 'success'
					});
				}
			},
 
			// base64转blob
			base64ToBlob(code) {
				let parts = code.split(';base64,');
				let contentType = parts[0].split(':')[1];
				let raw = window.atob(parts[1]);
				let rawLength = raw.length;
				let uInt8Array = new Uint8Array(rawLength);
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				}
				return new Blob([uInt8Array], {
					type: contentType
				});
			},
		},
	};
</script>
 
<style scoped>
	.el-container {
		max-height: 600px;
	}
 
	.qrcodeCon {
		text-align: center;
	}
 
	.qrcodeUrl {
		padding: 30px 0;
	}
 
	.qrcodeDownload {
		text-align: center;
	}
</style>