<template>
|
<el-dialog title="二维码" v-model="dialogVisible" width="300px" @close="closeDialog">
|
<div class="text-center">
|
<vueQr ref="query" background="#fff" :text="info.companyCode"></vueQr>
|
<div style="font-weight: bold;margin-bottom: 10px;">察县扫码入企监督平台</div>
|
<div>{{ info.companyName }}</div>
|
<div style="margin-top: 10px;">
|
<el-link @click="downImage" type="primary">下载企业码</el-link>
|
</div>
|
</div>
|
<canvas ref="canvasRef" style="position: absolute; left: 0; top: 2210px;background-color: white; display: none;"></canvas>
|
</el-dialog>
|
</template>
|
|
<script lang="ts" setup>
|
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
|
let dialogVisible = ref(false)
|
const canvasRef = ref()
|
const info = ref({})
|
const query = ref()
|
function openDialog(row) {
|
// console.log(row)
|
info.value = row
|
dialogVisible.value = true
|
}
|
function closeDialog() {
|
dialogVisible.value = false
|
}
|
function downImage() {
|
drawText()
|
const imageUrl = canvasRef.value.toDataURL('image/png')
|
// console.log(query.value.imgUrl)
|
let aLink = document.createElement('a')
|
let blob = base64ToBlob(imageUrl)
|
let evt = document.createEvent("HTMLEvents")
|
evt.initEvent("click", true, true) // initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
aLink.download = "二维码.png"
|
aLink.href = URL.createObjectURL(blob);
|
// aLink.dispatchEvent(evt);
|
aLink.click()
|
}
|
function drawText() {
|
const canvas = canvasRef.value;
|
canvas.width = 350;
|
canvas.height = 380;
|
canvas.style.width = '350px';
|
canvas.style.height = '380px';
|
const ctx = canvas.getContext('2d');
|
ctx.fillStyle = "#fff"
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
let img = new Image();
|
img.src = query.value.imgUrl;
|
const text = info.value.companyName;
|
|
ctx.drawImage(img, 10, 0, 320, 320);
|
// ctx.font = '20px Arial';
|
ctx.textAlign = 'center';
|
ctx.fillStyle = '#000';
|
// ctx.setFontWeight('bold')
|
ctx.font ='bold 20px Arial'
|
wrapText(ctx, "察县扫码入企监督平台", 180, 320, 350, 40)
|
// ctx.setFontWeight('normal')
|
ctx.font ="20px Arial"
|
wrapText(ctx, text, 180, 350, 350, 20)
|
}
|
function wrapText(context, text, x, y, maxWidth, lineHeight) {
|
var words = text.split('');
|
var line = '';
|
for(var n = 0; n < words.length; n++) {
|
var testLine = line + words[n] + ' ';
|
var metrics = context.measureText(testLine);
|
var testWidth = metrics.width;
|
if (testWidth > maxWidth && n > 0) {
|
context.fillText(line, x, y);
|
line = words[n] + ' ';
|
y += lineHeight;
|
}
|
else {
|
line = testLine;
|
}
|
}
|
if(line) {
|
context.fillText(line, x, y);
|
}
|
}
|
function 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})
|
}
|
defineExpose({
|
openDialog,
|
closeDialog
|
})
|
</script>
|
|
<style>
|
</style>
|
