二维码 生成 并点击下载

2018-11-12  本文已影响0人  摘笑

在 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
         下载: http://davidshimjs.github.io/qrcodejs/
          引入: <script src="qrcode.js"></script>
 ##二:调用
          // 简单
        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');  //设置二维码内容

    具体参考:http://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()
          }    
上一篇下一篇

猜你喜欢

热点阅读