vue代码
vue 使用QRCode生成二维码
时间:2023-12-26
前端使用QRCode插件能够方便的将链接生成二维码图片。比如微信支付、网站链接等情景,前端可以直接使用此插件将链接生成二维码图片:
一、下载
yarn add qrcode;//安装 import QRCode from "qrcode"; //引入生成二维码插件 export default { components: { QRCode, } |
二、使用
getQRcode(urlLink) { let opts = { errorCorrectionLevel: "L", //容错级别 type: "image/png", //生成的二维码类型 quality: 0.3, //二维码质量 margin: 4, //二维码留白边距 width: 256, //宽 height: 256, //高 text: "", //二维码内容 color: { dark: "#666666", //前景色 light: "#fff", //背景色 }, }; let imgurl =""; QRCode.toDataURL(urlLink, opts, (err, url) => { if (err) throw err; //将生成的二维码路径复制给data的QRImgUrl imgurl = url; }); const downloadElement = document.createElement("a"); downloadElement.href = imgurl; downloadElement.download = "122.png"; document.body.appendChild(downloadElement); downloadElement.click(); document.body.removeChild(downloadElement);
|