Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码

1.下载

npm install qrcode –save-dev

2.引入(在所需要的页面中引入)

import QRCode from “qrcode”; //引入生成二维码插件

3.生成二维码

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("二维码加载失败");}});},},};

作者：微微一笑绝绝子

出处：Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码 – 微微一笑绝绝子 – 博客园

本博客文章均为作者原创，转载请注明作者和原文链接。