'完善筛选项'

王恒

5 天以前 4ebc73199bcd4b23739a2e1d22c372e8081310c5

 src/views/infomanger/companymanger/components/createQrcode.vue

@@ -1,18 +1,21 @@
<template>
  <el-dialog title="二维码"  v-model="dialogVisible" width="300px" @close="closeDialog"> 
    <div class="text-center">
      <vueQr ref="query" :text="info.companyCode"></vueQr>
      <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) {
@@ -24,15 +27,61 @@
  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(query.value.imgUrl)
      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,')
@@ -49,4 +98,7 @@
  openDialog,
  closeDialog
})
</script>
</script>

<style>
</style>