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

Vue2项目

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

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

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

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

HTML

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");},}

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！