前端使用QRcode生成二维码

在vue中需要生成二维码，这时候我们可以使用qrcode这个插件来完成

1. 首先需要安装插件

npm install --save qrcode

2. 引入使用

import QRCode from "qrcode"

3. 直接上代码

<img src="" alt="" id="images" /> //首先创建一个节点标签

//然后生成二维码
具体怎么用，如何触发需要根据自身需求加事件触发

var jsonArr = '这是二维码内容'; //在这里赋值二维码内容
//这里设置二维码类型颜色等
var opts = {
   errorCorrectionLevel: "H",
   type: "image/jpeg",
   quality: 0.3,
   margin: 1,
   color: {
     dark: "#000000",
     light: "#ffffff",
     },
     width: 300,
   };
//这一步就是生成二维码图片，然后赋值给上面的img标签
QRCode.toDataURL(jsonArr, opts, function (err, url) {
  if (err) throw err;
  var img = document.getElementById("images");
  img.src = url;
 });

下一篇我会整理一个点击下载二维码的教程，有需要的可以看一下