vue中使用AraleQRCode生成二维码

vue中使用AraleQRCode生成二维码

问题背景

本文介绍vue中生成二维码的一种方案,使用AraleQRCode来实现。

问题分析

(1)安装对应的依赖包

复制代码
npm i arale-qrcode --save    

(2)完整代码如下:

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


<script>
import AraleQRCode from "arale-qrcode";
export default {
  name: 'app',
  data: () => {
    return {
      img: "",
    }
  },
  components: {},
  mounted() {
    this.makeCode();
  },
  methods: {
    //生成二维码方法
    makeCode() {
      const result = new AraleQRCode({
        render: "svg",      // 定义生成的类型 'svg' or 'table dom'
        text: "baorant so handsome!", // 二维码的链接
        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>

<style>
.code {
  display: flex;
  width: 300px;
  height: 300px;
}
</style>

(3)运行结果如下:

扫描该二维码可生成对应的内容。

相关推荐
SkylerHu17 分钟前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una25 分钟前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao28 分钟前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇33 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪34 分钟前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子44 分钟前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍1 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星2 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞2 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放用户动作键盘按键特殊处理方案
前端