生成二维码vue

项目中刚好有pc端生成二维码 ，扫描下载客户端的需求，总结一下

我这里的需求是扫码后直接下载app，实现步骤就是将apk文件放到服务器上，然后扫码下载到本机就好了

用的是QRcode，

这是封装的生成二维码组件，直接引用就行了。

<template>
    <canvas id="canvas" ref="canvas" class="canvas" :width="width" :height="height"></canvas>
</template>
  
<script>
import QRCode from 'qrcode'

export default {
    name: 'QRCode',
    props: {
        //二维码存储内容
        qrUrl: {
            type: String,
            default: "XXX" // 这是扫码后返回的数据，可通过父组件传入或者自定义
        },
        // canvas width
        width: {
            type: Number,
            default: 220
        },
        // canvas height
        height: {
            type: Number,
            default: 220
        },
        // 二维码尺寸（正方形 长宽相同）
        qrSize: {
            type: Number,
            default: 140
        },
        // 二维码底部文字
        qrText: {
            type: String,
            default: ""
        },
        //底部说明文字字号
        qrTextSize: {
            type: Number,
            default: 11
        }
    },
    watch: {
        // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
        qrUrl(newVal, oldVal) {
            this.qrUrl = newVal
            this.handleQrcode()
        },
        qrText(newVal, oldVal) {
            this.qrText = newVal
            // this.handleQrcode()
        },
    },
    data() {
        return {
        }
    },
    mounted() {
        this.handleQrcode()
    },
    methods: {
        handleClose() {
            this.$emit('close')
        },
        handleQrcode() {
            const qrCodeOption = {
                errorCorrectionLevel: "H",
                width: this.qrSize,
                version: 7
            };
            let canvas = this.$refs.canvas;
            canvas.width = canvas.width;
            canvas.height = canvas.height;
            QRCode.toDataURL(this.qrUrl)
                .then((url) => {
                    // 画二维码里的logo// 在canvas里进行拼接
                    const ctx = canvas.getContext("2d");
                    const image = new Image();
                    image.src = url;
                    new Promise((resolve) => {
                        image.onload = () => {
                            resolve(image);
                        };
                    }).then((img) => {
                        ctx.drawImage(img, (this.width - this.qrSize) / 2, 0, this.qrSize, this.qrSize);
                        if (this.qrText) {
                            //设置字体
                            ctx.font = "bold " + this.qrTextSize + "px Arial";
                            let tw = ctx.measureText(this.qrText).width; // 文字真实宽度
                            let ftop = this.qrSize - this.qrTextSize; // 根据字体大小计算文字top
                            let fleft = (this.width - tw) / 2; // 根据字体大小计算文字left
                            ctx.fillStyle = "#fff";
                            ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                            ctx.fillStyle = "#333";
                            ctx.fillText(this.qrText, fleft, ftop);
                        }
                    });
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        savePic() {
            let dom = document.getElementById('canvas');
            let a = document.createElement("a");
            //将二维码面板处理为图片
            a.href = dom.toDataURL("image/png", 0.5);
            a.download = this.qrText + ".png";
            a.click();
        },
        savePicAll(zip) {
            let dom = this.$refs.canvas;
            let blob = this.dataURLtoBlob(dom.toDataURL("image/png", 0.5)); //转二进制
            zip.file(`${this.qrText}.png`, blob, { binary: true })
        },
        // base64 转 二进制流(blob)
        dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], {
            type: mime,
          });
        },
    }
}
</script>
  
<style lang="scss" scoped></style>