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. Oracle 中的一些重要V$ 动态性能视图,系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  2. oracle批量插入数据(测试)

    做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入,那会浪费大量的时间,本文介绍了Oracle中如何通过一条 SQL快速生成大量的测试数据的方法.产生测试数据的SQ ...

  3. [转]QT4.8.5+qt-vs-addin-1.1.11+VS2010安装配置和QT工程的新建和加载

    1.下载windows下的QT库 QT4.8.5 for vs2010: http://download.qt-project.org/official_releases/qt/4.8/4.8.5/q ...

  4. js深度克隆对象

    js深度克隆对象 js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype ...

  5. 2018AVA: A Video Dataset of Spatio-temporally Localized Atomic Visual Actions

    论文标题:AVA: A Video Dataset of Spatio-temporally Localized Atomic Visual Actions 来源/作者机构情况: 谷歌,http:// ...

  6. HTML 浏览器抓包

    1.浏览器 2.抓包 3.查看get/post/cookie 一 谷歌浏览器 二 抓包查看get/post数据.cookie 截图:

  7. SVN 安装vs插件

    1.下载visualsvn for visual studio 2012/2013/2015/2017 2.查看是否安装成功 一 下载并安装插件 1.VisualSVN :VisualSVN-5.1. ...

  8. lesson3:小程序

    问题: 一·设计思想 创建一个静态变量,利用构造函数在每次创建对象时运行的机制,计算创建对象个数. 二·程序流程图 三·程序源代码 public class Test9{ public static ...

  9. 数据库隔离级别深入理解(ORACLE)

    TRANSACTION_READ_UNCOMMITTED 1 这种隔离级别最低,脏读,不可重复读,幻读都会发生,我用的oracle,并没有支持这个级别,不作研究. TRANSACTION_READ_C ...

  10. LOJ2537 PKUWC2018 Minimax 树形DP、线段树合并

    传送门 题意:自己去看 首先可以知道,每一个点都有几率被选到,所以$i$与$V_i$的关系是确定了的. 所以我们只需要考虑每一个值的取到的概率. 很容易设计出一个$DP$:设$f_{i,j}$为在第$ ...