前端vue项目：生成二维码，扫二维码跳转到相应页面

阅读本书更多章节>>>>

Vue2项目

1、安装依赖：：npm i arale-qrcode --save

2、引入：import AraleQRCode from "arale-qrcode";

接下来让我们纯前端生成一个二维码

                              【PS：亲测有效，大家可以放心使用 CV 大法哈  ！】

HTML

<template>    <!-- 二维码 -->    <div class="code">         <img :src="img" />    </div></template>

JS

  data() {      return {        img: "",      }  },  mounted() {      this.makeCode();  },  methods: {      //生成二维码方法      makeCode() {          const result = new AraleQRCode({                render: "svg",      // 定义生成的类型 'svg' or 'table dom’                text: "https://blog.csdn.net/m0_61343119/article/details/131842050?spm=1001.2014.3001.5501", // 二维码的链接                size: 150,      //二维码大小          });          // 将svg xml文档转换成字符串          const svgXml = new XMLSerializer().serializeToString(result);          // 将svg字符串转成base64格式，通过 window.btoa方法创建一个 base-64 编码的字符串，进行二次编码解码(encodeURIComponent 字符串进行编码和解码，unescape 进行解码)。          const src =                "data:image/svg+xml;base64," +                window.btoa(unescape(encodeURIComponent(svgXml)));                    // 本地存储图片          localStorage.setItem("image", src);          this.getImg();     },      // 获取存储的图片给到页面     getImg() {         this.img = localStorage.getItem("image");         console.log("$$$$", this.img);         localStorage.removeItem("image");     },        }  </script>

需求中遇到的情况，也是百度了很久参考了很多大佬的文章，所以这里记录一下，方便自己的同时希望对大家也有一点小小帮助；

如果哪里有不对的地方，希望路过的大佬留言哈，谢谢啦~

【不要慌不要慌，太阳下山有月光，月光落下有朝阳】

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-27/149460.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！