eleAdmin 生成二维码及前端下载
<template>
<div class="ele-body">
<ele-modal
width="30%"
top="5%"
:visible="visible"
v-if="visible"
:close-on-click-modal="false"
:destory-on-close="true"
:lock-scroll="false"
@update:visible="updateVisible"
:title="'应用二维码'"
>
<div id="svgDiv" style="text-align: center">
<!-- svg 渲染 -->
<ele-qr-code-svg :value="text" :size="size" />
<!-- canvas 渲染 -->
<ele-qr-code :value="text" :size="size" />
<div style="margin-top: 30px; margin-bottom: 40px">
<el-button type="primary" size="small" @click="downloadQrcode"
>下载svg</el-button
>
<el-button type="primary" size="small" @click="downloadQrcode2"
>下载canvas</el-button
>
</div>
</div>
</ele-modal>
</div>
</template>
<script>
import EleQrCode from 'ele-admin/es/ele-qr-code';
import EleQrCodeSvg from 'ele-admin/es/ele-qr-code-svg';
export default {
name: 'homeAppQrcode',
components: { EleQrCode, EleQrCodeSvg },
props: {
visible: Boolean,
data: Object
},
data() {
return {
size: 240,
text: ''
};
},
methods: {
updateVisible(visible) {
this.$emit('update:visible', visible);
},
// 二维码转换函数
covertSVG2Image(node, name, width, height, type = 'png') {
let serializer = new XMLSerializer();
let source =
'<?xml version="1.0" standalone="no"?>\r\n' +
serializer.serializeToString(node);
let image = new Image();
image.src =
'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
let context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, 10000, 10000);
image.onload = function () {
context.drawImage(image, 0, 0);
let a = document.createElement('a');
a.download = `${name}.${type}`;
a.href = canvas.toDataURL(`image/${type}`);
a.click();
};
},
// 下载svg二维码
downloadQrcode() {
console.log(document.getElementsByTagName('svg'));
console.log(document.getElementsByTagName('svg')[1]);
this.covertSVG2Image(
document.getElementsByTagName('svg')[1],
this.data.name,
this.size,
this.size
);
},
// 下载canvas二维码
downloadQrcode2() {
console.log(document.getElementsByTagName('canvas')[0]);
let url = document
.getElementsByTagName('canvas')[0]
.toDataURL(`image/png`);
let a = document.createElement('a');
a.download = `${this.data.name}.png`;
a.href = url;
a.click();
}
},
watch: {
visible(visible) {
if (visible) {
if (this.data) {
this.text = this.data.url;
if (!this.text) {
this.$message.error('无法展示二维码,请检查');
this.updateVisible(false);
} else {
console.log(this.text);
}
}
}
}
}
};
</script>