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

duansamve

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

阅读量2k

点赞数 2

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

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

本文链接：https://blog.csdn.net/duansamve/article/details/79846468

版权

vue 专栏收录该内容

107 篇文章 5 订阅

订阅专栏

首先安装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();
}