前端 vue :生成的二维码跳转到指定页面

下载：arale-qrcode：npm i arale-qrcode --save

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

script中写入：

<script>
import AraleQRCode from "arale-qrcode";
export default {
  name: "myCode",

  data() {
    return {
      tupian: "",
    };
  },

  methods: {
    makeCode() {
      const result = new AraleQRCode({
        render: "svg" /*  生成的类型 'svg' or 'table dom元素类型 */,
        text: "想要跳转页面的链接" /* 二维码的链接*/,
        size: 100,
      });
      //   console.log('====',result)
      const svgXml = new XMLSerializer().serializeToString(result);
      //   console.log('----',svgXml)
      const src =
        "data:image/svg+xml;base64," +
        window.btoa(unescape(encodeURIComponent(svgXml)));
      //   console.log('*****',src)
      localStorage.setItem("image", src);
      this.jieshou();
    },
    jieshou() {
      this.tupian = localStorage.getItem("image");
      console.log("$$$$", this.tupian);
      localStorage.removeItem("image");
    },
  },
  mounted() {
    this.makeCode();
  },
};
</script>

在html中加入绑定图片的标签

<div class="">
      <img :src="tupian" />
    </div>

参考文章：纯前端实现一键生成二维码_前端生成二维码_zl_Alien的博客-CSDN博客

这位大佬写的是react 和typescript，自己工作中遇到了这个需求，项目是vue基础的，根据这位作者大大修改了一下。

这里是记录一下，怕以后再遇到忘记了，哪里不对请各位大佬指出来，谢谢谢谢