使用 Angular 生成二维码

昨天项目里遇到生成二维码的需求,觉得挺有意思。 于是就在网上找了找,也都一一试过,把自己实现的方法整理一下;

分别用了两种方法试过,下面就贴上结果和过程图片;

第一种方法: 

通过 qrcode.js 生成二维码:

----步骤 1:----

    下载 qrcode.js 文件;http://davidshimjs.github.io/qrcodejs/);

    下载后,把 qrcode.js或者 qrcode.min.js 放进本地的 assets文件夹下面;

----骤 2:----

    在 index.html (全局文件)中,引入;

----步骤 3:----

    在需要用到的模块中声明; (declare var QRCode);

    

----步骤 4:----

    在html页面中,嵌入元素

----步骤 5:----

    

文章末开头和末尾有示例图;

 

 

第二种方法:

       使用angular2-qrcode

      ----步骤 1:----

安装 angular2-qrcode  (npm install angular2-qrcode --save)

----步骤 2:----

在需要使用的模块中引入 (也可以全局引入),**我这里是全局引入**

----步骤 3:----

在 html 中嵌入模板:

文章末开头和末尾有示例图;

 

example: (二维码路径是第一种方法中 qrcode.js的下载地址)

代码示例已经上传,等待审核通过,我再把链接贴出来;

 

 

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值