使用 Angular 生成二维码

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

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

使用 Angular 生成二维码_第1张图片

第一种方法: 

通过 qrcode.js 生成二维码:

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

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

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

使用 Angular 生成二维码_第2张图片

----骤 2:----

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

使用 Angular 生成二维码_第3张图片

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

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

    使用 Angular 生成二维码_第4张图片

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

    在html页面中,嵌入元素

使用 Angular 生成二维码_第5张图片

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

    使用 Angular 生成二维码_第6张图片

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

 

 

第二种方法:

       使用angular2-qrcode

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

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

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

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

使用 Angular 生成二维码_第7张图片

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

在 html 中嵌入模板:

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

 

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

使用 Angular 生成二维码_第8张图片

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

 

 

 

你可能感兴趣的:(angular)