Vue中使用qrcodejs2插件实现二维码生成及二维码图片下载

duansamve

已于 2022-08-29 18:34:52 修改

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

于 2020-05-13 21:29:34 首次发布

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/79846468

vue 专栏收录该内容

115 篇文章

订阅专栏

本文介绍如何在Vue项目中利用QRCodeJS2插件生成二维码，并提供了清除二维码及下载二维码图片为PNG格式的方法。通过安装插件、引入页面、设置页面标签和编写methods，可以轻松实现二维码的生成与管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装qrcodejs2插件：

cnpm install qrcodejs2 --save

引入页面：

import QRCode from "qrcodejs2";

页面标签：

<div id="qrcode" ref="qrcode"></div>

可以使用id 或者ref，建议使用ref，因为使用vue框架控制虚拟Dom才是正确的选择简单方便。

methods：

creatQrCode() {
      this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
      let text = 'xxxx';
      var qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      qrcode.clear(); // 清除二维码方法二
}

下载二维码图片：

savePic() {
      let qrCodeCanvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = qrCodeCanvas[0].toDataURL("image/url");
      a.download = `【${this.$microWidgetProps.contextMenu.getSelections[0].name}】二维码.png`;
      a.click();
}