eleAdmin 生成二维码及前端下载

原创已于 2024-04-08 09:46:49 修改 · 518 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-04-08 09:45:54 首次发布

该篇文章介绍了如何在eleAdmin框架中使用EleQrCode和EleQrCodeSvg组件生成SVG和Canvas格式的二维码，并提供了前端下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>