Installation - Angular 5+, Ionic

NPM

npm install angularx-qrcode --save

Yarn

yarn add angularx-qrcode

Installation - Angular 4

NPM

npm install angularx-qrcode@1.0.2 --save

Yarn

yarn add angularx-qrcode@1.0.2

Basic Usage

Import the module and add it to your imports section in your main AppModule (file: app.module.ts)

// all your imports
import { QRCodeModule } from 'angularx-qrcode'; @NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Examples

Generate a QR Code from a string (directive only)

Now that Angular/Ionic knows about our QR Code module, we can invoke it from our template with a directive. If we use a simple text-string, we need no additional code in our controller.

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>

Create a QR Code from a variable in your controller

In addition to our <qrcode>-directive in example.html, we add two lines of code to our controller example.ts.

// example.ts:
export class QRCodeComponent {
public angularxQrCode: string = '';
// assign a value anywhere in/below your constructor
this.myAngularxQrCode = 'Your QR code data string';
} // example.html:
<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>

Parameters

Attribute Type Default Description
allowEmptyString Boolean false Allow empty string
colorlight String '#ffffff' Dark color
colordark String '#000000' Light Color
level String 'M' QR Correction level ('L', 'M', 'Q', 'H')
qrdata String '' String to encode
size Number 256 Height / Width (any value)
usesvg Boolean false SVG Output

Note

Depending on the size (amoutn of data) of the qrdata to encode, a minimum size might be required.

git地址:https://github.com/Cordobo/angularx-qrcode

Angular生成二维码的更多相关文章

  1. 六、angular 生成二维码

    首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的 ...

  2. JavaScript的学习--生成二维码

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...

  3. Javascript生成二维码(QR)

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  4. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  5. iOS 生成二维码

    首先先下载生成二维码的支持文件 libqrencode 添加依赖库 CoreGraphics.framework. QuartzCore.framework.AVFoundation.framewor ...

  6. QR code 扩展生成二维码

    include './phpqrcode/phpqrcode.php';  //引入QR库 QRcode::png("leo", 'qrcode.png', 'L', 10);  ...

  7. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  8. C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)

    用C#如何生成二维码,我们可以通过现有的第三方dll直接来实现,下面列出几种不同的生成方法: 1):通过QrCodeNet(Gma.QrCodeNet.Encoding.dll)来实现 1.1):首先 ...

  9. 使用Spire.Barcode程序库生成二维码

    使用Spire.Barcode程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...

随机推荐

  1. go标准库的学习-reflect

    参考: https://studygolang.com/pkgdoc http://c.biancheng.net/golang/concurrent/ 导入方式: import "refl ...

  2. Linux系统--命令行安装weblogic10.3.6

    Linux下命令行安装weblogic10.3.6 一.安装前准备工作: 1.创建用户useradd weblogic;创建用户成功linux系统会自动创建一个和用户名相同的分组,并将该用户分到改组中 ...

  3. 导入其他python文件或者python文件的函数

    from abc import xxx 从abc的py文件导入一个具体的函数或者类 import abc 直接导入文件 a.b写在同一个文件目录下,a要使用b,直接import就可以了

  4. vue v-for 遍历循环时的key值的报错

    问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primit ...

  5. 获取键盘的ascii码

    waitKey(1) & 0xFF获取当前按的键的ascii码,

  6. PAT A1139 First Contact (30 分)——set

    Unlike in nowadays, the way that boys and girls expressing their feelings of love was quite subtle i ...

  7. AI mac安装TensorFlow

    1.安装pip sudo easy_install pip 2.安装virtualenv sudo pip install --upgrade virtualenv 3.在指定目录创建virtuale ...

  8. JavaScript中的slice函数

    String.slice(start,end)returns a string containing a slice, or substring, of string. It does not mod ...

  9. coredns CrashLoopBackOff 报错

    1.kubectl logs -f coredns-99b9bb8bd-47mvf -n kube-system .:53 2018/09/22 07:39:37 [INFO] CoreDNS-1.2 ...

  10. NDK toolchain对应ABI

    有些时候,解决一些问题,我们需要多一些耐心. 从今天起,正式开始SkylineGlobe移动端Android版本的二次开发. Application.mk修改为NDK_TOOLCHAIN := arm ...