二维码生成并点击下载

·  阅读 412

在 vue 中

一:安装 qrcode-vue 组件

npm install --save qrcode.vue

import QrcodeVue from 'qrcode.vue';

在工程项目中,于组件同样的方式引入、注册

标签: <qrcode-vue :value="value" :size="size" level="H" id="qrcode"></qrcode-vue>

Component props: 
          value : 网址链接
          size:大小(单位 px)
          level:容错级别

具体参考:https://github.com/scopewu/qrcode.vue/blob/HEAD/README-zh_cn.md
复制代码

在常规项目中

一:引入 QRCode.js

下载: davidshimjs.github.io/qrcodejs/ 引入:

二:调用

  // 简单
let qrcode = new QRCode(document.getElementById('qrcode'), 'your content');

// 设置参数
let qrcode = new QRCode(qrcode , {
    text: 'your content',
    width: 256,
    height: 256,
    colorDark : '#000000',
    colorLight : '#ffffff',
    correctLevel : QRCode.CorrectLevel.H
});

// 使用 API
qrcode.clear(); //清除二维码内容
qrcode.makeCode('new content');  //设置二维码内容
复制代码

具体参考:davidshimjs.github.io/qrcodejs/

点击下载二维码

  saveImg (){
       //找到canvas标签
      let cvs= document.getElementById('qrcode').getElementsByTagName('canvas');
      //创建一个a标签节点
      let a = document.createElement("a")
       //设置a标签的href属性(将canvas变成png图片)
      a.href = cvs[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
      //设置下载文件的名字
      a.download = "qrcode.png"
      //点击
      a.click()
  }
复制代码
分类:
前端
标签: