Angular2 生成二维码

想要在angular2及以上生成二维码的方法有很多，我写我实验过并成功的来分享给大家。一种是直接使用qrcode.js；另外可以使用angular封装好的库，一个是angular2-qrcode（不支持中文），一个是ng2-qrcode。

1、qrcode.js

下载

大家可以在这个地址http://davidshimjs.github.io/qrcodejs/去下载qrcode.js，然后将它放到你项目的assets文件夹下。如下图：

assets

使用

先将qrcode.js在你的index.html引入，如下：

然后在你需要用到的组件中先要声明(一定要声明，不然会报错)，如下：

declare var QRCode;

DOM 结构：

code.component.ts:
记住，一定要在视图加载完成后在使用，不然它会报错说找不到这个节点，所以一定要写在ngAfterViewInit里。

import {Component, OnInit, AfterViewInit } from '@angular/core';

export class CodeComponent implements OnInit, AfterViewInit {

  ngAfterViewInit() {
    new QRCode(document.getElementById('qrcode'), {
        width: 150,
        height: 150
      }).makeCode('this is your content');
  }
}

*注：qrcode 还有很多参数，大家可以参考这个http://code.ciaoca.com/javascript/qrcode/

2、angular2-qrcode

下载

在项目中打开“终端”，运行以下命令：

npm install angular2-qrcode --save

使用

使用angular2-qrcode首先需要在使用到的模块中引用注册:

import { NgModule } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode';
...

@NgModule({
    imports: [
        QRCodeModule,
        ...
    ],
    ...
})

然后便可以在需要的html页面中使用了:

参数说明

参数名	参数类型	参数说明
data	String	要转成二维码的文字
size	Number	要转成的二维码图片的大小
level	String	要转成的二维码的质量等级（'L', 'M', 'Q', 'H'）（可以为空）
type	Number	要转成二维码的文字对应的缓冲区的大小（可以为空

*注：
二维码的质量等级指的是二维码的容错率：

• L：容错率7%
• M：容错率15%
• Q：容错率25%
• H：容错率30%

** 注：我实验ng2-qrcode失败了，照着官方文档也没有弄出来，等后面我实验出来了再来告诉大家~
大家如果觉得我的文章对你有帮助，记得帮我点赞哦~~
最后附上我的github地址给大家https://github.com/LiUhoNgDan222