1)安装
npm install vue-qr --save
npm install html2canvas --save
npm install jszip --save
npm install file-saver --saver --save
vue-qr:生成二维码样式参考链接
html2canvas:html的二维码转成canvas再转成图片参考链接
jszip :将图片压缩参考链接
file-saver:将压缩包下载下来参考链接
2)使用
/*
* @Author: duyan
* @Date: 2020-07-30 11:01:19
* @Last Modified by: duyan
* @Last Modified time: 2020-08-03 16:54:02
*/
<template>
<div>
<div v-show="codeId" ref="QrcodePage" style="z-index:-1111;position:absolute;width: 800px;left:-999px;overflow:hidden;height: 475px;background-size: cover;">
<div v-if="codeId" id="qrCode" class="qrCode">
<QrcodeVue
:correct-level="3"
:key="random"
:callback="texte"
:text="codeValue"
:logo-scale="0.3"
:margin="0"
:logo-margin="2"
:size="750"
logo-src="https://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/yzparkinglogo.png"
/>
<p style="text-align: center; font-size: 2rem;">{{ codeName }}</p>
</div>
<div v-if="codeId" id="qrCode1" class="qrCode">
<QrcodeVue
:correct-level="3"
:logo-src="imageUrl"
:logo-scale="0.3"
:margin="0"
:logo-margin="2"
:size="750"
text="http://kmzhtc-app.oss-cn-shenzhen.aliyuncs.com/org.kcsm.yzc/1593422803050_Android_3.0.4_.apk"
/>
<p style="text-align: center; font-size: 2rem;">云智社区</p>
</div>
</div>
</div>
</template>
<script>
import QrcodeVue from 'vue-qr'
import html2canvas from 'html2canvas'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default {
name: 'Qrcode',
components: {
QrcodeVue
},
props: {
qrName: {
type: String,
default: ''
}
},
data() {
return {
random: '1',
codeId: '',
qrcodeUrl: '',
imageUrl: 'https://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/yunzhilogo.png',
// imageUrl: 'https://shop.mmdddd.com/workShopWeb/static/img/72.png',//logo
qrContentImage: '',
codeValue: '',
// initCodeVal: 'http://xcx.nmte.net/tips/index.html',
codeNumber: '',
codeName: '',
arr: [],
qrcodeArr: [],
index: 0
}
},
watch: {
index(newName, oldName) {
if (newName !== oldName && newName <= this.arr.length - 1) {
setTimeout(_ => {
this.setarr(this.arr)
}, 0)
} else {
this.$nextTick(_ => {
this.$emit('downloadQr', 'finish')
})
}
}
},
created() {
},
mounted() {},
methods: {
texte(url, qid) {
setTimeout(_ => {
this.createImgs()
}, 100)
},
setarr(arr) {
this.arr = arr
if (this.index > this.arr.length - 1) {
this.index = 0
}
const index = this.index || 0
this.$emit('downloadQr', 'start')
this.codeName = this.arr[index].codeName
if (this.arr[index].codeId) {
this.codeId = this.arr[index].codeId
this.codeValue = JSON.stringify(this.arr[index].codeValue)
console.log(this.codeValue)
this.random = Math.random()
} else {
this.$notify({
title: '失败',
message: '二维码信息获取失败,请重试',
type: 'error'
})
this.$emit('downloadQr', 'error')
}
},
createImgs() {
var that = this
if (that.index <= that.arr.length - 1 && that.codeId) {
const shareContent = that.$refs.QrcodePage
const width = shareContent.offsetWidth
const height = shareContent.offsetHeight
const canvas = document.createElement('canvas')
const scale = 1
canvas.width = width * scale
canvas.height = height * scale
canvas.style.width = (shareContent.clientWidth * scale) / 100 + 'rem'
canvas.style.height = (shareContent.clientHeight * scale) / 100 + 'rem'
canvas.getContext('2d').scale(scale, scale)
const opts = {
scale: scale,
canvas: canvas,
logging: false,
width: width,
height: height,
useCORS: true
}
html2canvas(shareContent, opts)
.then(function(canvas) {
const qrContentImage = canvas.toDataURL('image/jpeg', 1.0)
if (that.index <= that.arr.length - 1 && that.codeId) {
that.qrcodeArr.push({
url: qrContentImage,
name: that.arr[that.index].codeName,
number: that.arr[that.index].codeNumber
})
}
if (that.codeId) {
that.index++
}
if (that.qrcodeArr.length === that.arr.length) {
that.packageImages()
that.codeId = null
}
})
.catch(function(reason) {
console.log(reason)
})
}
},
packageImages() {
const that = this
const zip = new JSZip()
const cache = {}
setTimeout(_ => {
const arr = that.qrcodeArr
arr.forEach((item, index) => {
const fileName = item.name
zip.file(fileName + '.png', item.url.substring(22), { base64: true })
cache[fileName] = item.url
})
zip.generateAsync({ type: 'blob' }).then(content => {
FileSaver.saveAs(content, this.qrName + '.zip')
})
}, 0)
}
}
}
</script>
<style lang="stylus" scoped="scoped">
#qrCode1{
left: 80% !important;
}
.qrCode {
width: 300px;
height: 300px;
position: absolute;
top: 52%;
left: 30%;
transform: translate(-50%, -50%);
img {
display: block;
width: 100%;
height: 100%;
}
}
</style>
import QrcodeVue from 'vue-qr'
// 部件
components: {
QrcodeVue
},
勾选需要导出的二维码:
// 表格勾选
selectTable(val) {
this.delEquipmentList = []
this.selEquipmentList = val
val.forEach(val1 => {
this.delEquipmentList.push(val1.id)
})
},
点击导出二维码按钮调用
exportQr(){
if (this.selAddressList.length) {
const list = []
console.log(this.selAddressList)
this.selAddressList.forEach((val, index) => {
const params = {
codeId: val.id,
codeNumber: val.gateId,
codeName: val.gateName,
codeValue: {
key: 'address',
value: val.gateId
}
}
list.push(params)
if (index === this.selAddressList.length - 1) {
console.log(list)
that.$refs.downloadQr.setarr(list)
}
})
} else {
this.$notify({
title: '提示',
message: '请先勾选需要导出的地点二维码',
type: 'warning'
})
}
// 二维码下载监听
downloadQr(data) {
if (data === 'start') {
this.searchHandle[1].loading = true
this.searchHandle[1].label = '二维码下载中...'
} else if (data === 'error') {
this.searchHandle[1].loading = false
this.searchHandle[1].label = '重新导出二维码'
} else if (data === 'finish') {
this.searchHandle[1].loading = false
this.searchHandle[1].label = '导出地点二维码'
this.$notify({
title: '成功',
message: '二维码导出成功',
type: 'success'
})
}
},