Vue生成条形码以及二维码并下载

生成条形码

npm install --save @xkeshi/vue-barcode //下载插件

项目组件中引入

import barcode from "@xkeshi/vue-barcode"
components:{barcode},

组件中使用

<barcode id="barcode" :value="barCodeValue" :options="barCodeOption"></barcode>

data数据

barCodeValue:'1234567890',//根据这个值来生成条形码
barCodeOption:{
	format:"CODE128",//生成ENA-128条形码
	width:1,//线宽
	displayValue: true, //是否默认条形码显示数据
	background: '#fff', //条形码背景颜色
	height: '30px',//线条高度
	fontSize: '15px',//一维码数字大小
},

方法

//下载条形码
barcodeDownload(){
	let fileName = "条形码"
	let img =  document.getElementById("barcode").toDataURL("image/png") //将canvas转换为base64
	let aLink = document.createElement('a') //动态创建a标签
	let blob = this.base64ToBlob(img) //将base64转换为blob
	let evt = document.createEvent('HTMLEvents') //动态创建一个event对象
	evt.initEvent('click',true,true) //初始化一个点击事件
	aLink.download = fileName
	aLink.href = URL.createObjectURL(blob) //将blob同步到a标签的href属性上
	aLink.click() //触发点击事件
}

生成二维码

npm install vue-qr //下载插件

项目组件中引入

import VueQr from 'vue-qr'
components:{VueQr},

组件中使用

<vue-qr id="vueQr"
:logoSrc="config.imagePath"
:logoScale="0.25"
:text="config.value"
:size="180"
:margin="0"
></vue-qr>

data数据

config:{
	value: 'https://www.baidu.com',//显示的值、跳转的地址
	imagePath: require('../../assets/img/qrIcon.jpg')//中间logo的地址，require必要
},

方法

下载二维码
qrcodeDownload(){
	let fileName = '二维码.png' //下载图片的名字
	let img = document.getElementById('vueQr').src //获取到图片的base64
	let aLink = document.createElement('a') //动态创建一个a标签
	let blob = this.base64ToBlob(img) //将base64转换为blob
	let evt = document.createEvent('HTMLEvents') //动态创建一个event对象
	evt.initEvent('click',true,true) //初始化一个点击事件
	aLink.download = fileName
	aLink.href = URL.createObjectURL(blob) //将blob同步到a标签的href属性上
	aLink.click() //触发点击事件
}

转换base64为blob的方法

//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})
},