在vue中生成二维码（引入工具Qrious/Qrcode或iframe直接生成）

目录

Qrious

在vue中引入Qrious

生成二维码

Qrcode

在vue中引入Qrcode

生成二维码

利用iframe生成二维码

---

Qrious

qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。

官网：GitHub - neocotic/qrious: Pure JavaScript library for QR code generation using canvas

在vue中引入Qrious

在需要生成二维码的组件中引入，通过npm install --save qrious安装。

// npm install --save qrious
import QRious from "qrious";

生成二维码

利用canvas画布元素呈现二维码。

<canvas id="qr"></canvas>

// 生成微信支付二维码
orderPayApi
    .getWechatPayQR(订单id等，看后端接口需求)
    .then((res) => {
        const qr = new QRious({
            element: document.getElementById("qr"),   // canvas元素
            value: res,   // 需要编码为二维码的值
        });
        qr.size = 180;  // 二维码尺寸
    })
    .catch((err) => {
        this.messageBox(err.message, "error");
    });

Qrcode

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

在vue中引入Qrcode

在需要生成二维码的组件中引入qrcode，在main.js（全局）中引入组件，通过npm install --save qrcode安装。

// npm install --save qrcode

import QRCode from "qrcode"; // 在组件中引入

import QRcode from './components/QRcode'  // 全局引入
Vue.use(QRcode);

生成二维码

引用了：https://www.cnblogs.com/wwyxjjz/p/16922490.html

<canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas>

准备好二维码url，各种属性，画布元素以及错误后处理方法，然后用QRCode.toCanvas（）包裹以上元素。

<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  props: [""],
  data() {
    return {
      qrUrl: "",
    };
  },
  watch: {},
  mounted() {
    this.getQRCode();
  },
  created() {},
  methods: {
    getQRCode() {  

    //生成的二维码为URL地址js
    this.qrUrl= "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53";
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 280, //宽
        height: 280, //高
        text: "http://www.xxx.com", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      
      let msg = document.getElementById("QRCode_header");
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
          this.$message.error("二维码加载失败");
        }
      });
    },
  },
};
</script>

利用iframe生成二维码

创建iframe元素，以呈现二维码。

// 支付宝支付为例
<iframe
    id="alipayFrame"
    style="width: 190px; height: 190px"
></iframe>

// 生成支付宝支付二维码
orderPayApi
    .getAliPayQR(订单id等，看后端接口需求)
    .then((res) => {
        let o = document.getElementById("alipayFrame");  // 用来呈现二维码的元素
        // 创建二维码对象
        let ed = document.all
            ? o.contentWindow.document
            : o.contentDocument;
        ed.open();
        ed.write(res);  // 写入
        ed.close();
        ed.contentEditable = true;  // 开启该元素的编辑模式
        ed.designMode = "on";  // 控制整个文档是否可编辑。有效值为 "on" 和 "off" 。根据规范，该属性默认为 "off" 。
    })
    .catch((err) => {
        this.messageBox(err.message, "error");
    });