(一)web页面效果:
(二)执行结果:
(三)vue代码实例:
1)安装qrcode-vue库:npm install --save qrcode-vue
2)vue代码
<template>
<div class="div-box">
<qrcode-vue
id="qrcodeBox"
:size="qrcodeVue.size"
:value="qrcodeVue.value"
:bgColor="qrcodeVue.bgColor"
:fgColor="qrcodeVue.fgColor">
</qrcode-vue>
<el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码图片</el-button>
</div>
</template>
<script>
import qrcodeVue from 'qrcode-vue'
export default {
name: 'Test',
components: { qrcodeVue },
data () {
return {
qrcodeVue: {
size: 150,
bgColor: '#67C23A', //背景色
fgColor: '#FFFFFF', //前景色
value: 'qrCode value', //二维码值
logo: require('@/assets/logo.png') //logo图片
}
}
},
created () {
},
mounted () {
},
methods: {
downloadCode(){
//找到canvas标签
let myCanvas = document
.getElementById('qrcodeBox')
.getElementsByTagName('canvas')
let img = document.getElementById('qrcodeBox').getElementsByTagName('img')
// // //创建一个a标签节点
let a = document.createElement('a')
// //设置a标签的href属性(将canvas变成png图片)
let imgURL = myCanvas[0].toDataURL('image/jpg')
let 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)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob,row.num+'('+row.materialNum+')'+ '.' + 'png')
} else if (ua.indexOf('Firefox') > -1) {
//火狐兼容下载
let blob = this.base64ToBlob(imgURL) //new Blob([content]);
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
a.download = row.num+'('+row.materialNum+')' //下载图片名称,如果填内容识别不到,下载为未知文件,所以我这里就不填为空
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 = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
a.href = img.src
//设置下载文件的名字
a.download = '二维码下载图片名称'
//点击
a.click()
}
}
}
}
</script>
<style>
.div-box {
width:fit-content;
height:fit-content;
padding: 2px;
border: 1px dashed #f69c55;
position: relative;
text-align: center;
}
</style>