Angular-生成二维码

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhang__ao/article/details/82628580

使用Angular2生成二维码是非常简单的，有两个库提供支持：angular2-qrcode(不支持中文)、ng2-qrcode 。

安装

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

安装angular2-qrcode

npm install angular2-qrcode --save 

安装ng2-qrcode

npm install ng2-qrcode --save

用法

在使用angular2-qrcode首先需要在使用到的模块中引入，而ng2-qrcode则不用：

npm install -D @types/jquery
 
2、引入jquery

@NgModule({
 declarations: [
    AppComponent,
    QrcodeComponent,
  ]
    imports: [
        BrowserModule,
        HttpModule,
        QRCodeModule,   // 在此引入angualr2-qrcode模板
        ...
    ],
     bootstrap: [AppComponent]
})
export class AppModule {
}

在html中使用angular2-qrcode与ng2-qrcode方式是一致的，不过接收的参数有所差别而已：

./src/app/qrcode/qrcode.html

 <qr-code [value]="curQCode" size="300"  background="#f2f1f1" padding="30"></qr-code>  //value就是二维码中所要输人的数据

angular2-qrcode可以接收的参数：

参数名称	类型	参数默认	参数说明
value	‘’		Input数据的输入
size	Number	100	二维码的大小
level	String	'L'	要转成的二维码的质量等级（'L', 'M', 'Q', 'H'）（可以为空) *二维码质量等级： L:容错率%7、M:容错率%15、Q:容错率%25、H:容错率%30、
background	String	'white'	背景颜色
backgroundAlpha	Number	1.0	背景的不透明度
foreground	String	'black'	前景颜色
foregroundAlpha	Number	1.0	前景的不透明度
mime	String	'image/png'	输出图像的MIME类型
padding	Number	null	二维码周围的填充
canvas	Boolean	false

ng2-qrcode可以接收的参数：

参数名称	类型	参数默认	参数描述
size	Number	256	二维码大小
level	String	'M'	要转成的二维码的质量等级（'L', 'M', 'Q', 'H'）
colorlight	String	'#ffffff'	输出的二维码图片中高亮部分的颜色
colordark	String	'#000000'	输出的二维码图片底色的颜色
usesvg	Boolean	false	SVG Output
qrdata	String	''	Input数据的输入