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

这篇具有很好参考价值的文章主要介绍了前端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>

  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.toymoban.com/news/detail-724683.html

到了这里，关于前端vue项目：生成二维码，扫二维码跳转到相应页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！