vue2.0使用qrcodejs2生成二维码&&(顶部||底部)带文字描述,支持下载

//html
 <div id="qrcode" class="qrcode"></div>
 //js
 // qrcodeMix.js
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      fs: 16,
      border: 30,
      width: 200,
      height: 200,
      canvasId: "qrcodeCanvas",
    };
  },
  methods: {
    /**
     * 二维码生成
     * @param content 生成二维码内容
     * @param bottomText 二维码底部描述
     * @param qrcodeDom 挂在dom
     * @returns {*|HTMLDivElement}
     */
    genQrcode(content, bottomText, topText, qrcodeDom = null) {
      document.getElementById(qrcodeDom).innerHTML = null;
      const qrcodeContent = document.getElementById(qrcodeDom);
      qrcodeContent.width = this.width + "px";
      qrcodeContent.height = this.width + "px";
      //生成二维码
      const qrcodeCanvas = new QRCode(qrcodeContent, {
        text: content, // 需要转换为二维码的内容
        width: this.width,
        height: this.height,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      //----------绘制canvas start-----------
      let resolutionMultiple = 1; // 分辨率倍数
      let borderSize = this.border * resolutionMultiple; // 边框留白
      let canvasWidth = this.width + this.border * 2 * resolutionMultiple; // 图片宽度
      let fontSize = this.fs * resolutionMultiple; // 文字大小 
      let canvasHeight = canvasWidth + fontSize * 3; //新canvas高度
      let canvas = document.createElement("canvas");//创建canvas
      canvas.id = this.canvasId;//设置canvas id
      if (!canvas.getContext) return;
      canvas.width = canvasWidth; //设置新canvas宽
      canvas.height = canvasHeight;//设置新canvas高
      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "#fff"; //新canvas背景色
      ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制
      ctx.drawImage(
        qrcodeContent.querySelector("canvas"),
        borderSize,
        borderSize + this.border,
        this.width,
        this.height
      ); // 填充二维码 drawImage(img,x,y,w,h)
      ctx.fill(); // 填充背景
      //----------绘制canvas end-----------
      
      //底部文字
      //设置字体
      ctx.fillStyle = "#666"; //字体颜色
      ctx.font = fontSize - 2 + "px Arial"; // 文本大小, 字体
      ctx.textAlign = "center";
      if (bottomText) {
        ctx = this.drawText(
          ctx,
          bottomText,
          canvasWidth / 2,
          this.width + borderSize + 40,
          this.width
        );
      }
      //顶部文字
      ctx.font = fontSize + "px Arial"; // 文本大小, 字体
      if (topText) {
        ctx = this.drawText(ctx, topText, canvasWidth / 2, 10, this.width);
      }
      //将新canvas追加到qrcodeContent.
      qrcodeContent.appendChild(canvas);
      //将旧二维码和img标签remove
      Array.from(qrcodeContent.childNodes).forEach((item) => {
        if (!item.id) item.remove();
      });
      return qrcodeContent;
    },

    /**
     *  文字换行
     * canvas文本换行处理
     * @param ctx canvas的 2d 对象
     * @param bottomText 绘制的文字
     * @param x 文字X坐标
     * @param y 文字Y坐标
     * @param w 文字最大宽度
     * @param space 每行字体y坐标间隔默认17
     */
    drawText(ctx, bottomText, x, y, w, space = 17) {
      // ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
      const chr = bottomText;
      let temp = "";
      const row = [];

      for (let a = 0; a < chr.length; a++) {
        if (
          ctx.measureText(temp).width < w &&
          ctx.measureText(temp + chr[a]).width <= w
        ) {
          temp += chr[a];
        } else {
          row.push(temp);
          temp = chr[a];
        }
      }
      row.push(temp);
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b], x, y + (b + 1) * space); // 每行字体y坐标间隔20
      }
      return ctx;
    },
    //下载
    download(name) {
      const a = document.createElement("a");
      //获取二维码画布,实质是canvas节点
      a.href = document.getElementById(this.canvasId).toDataURL("image/png");
      a.download = name; // 图片名称
      a.click();
    },
  },
};

参考 https://www.cnblogs.com/qiushuiyu-108/p/17352350.html