Angular生成二維碼

Installation - Angular 5+, Ionic

NPM

npm install angularx-qrcode --save
           

Yarn

yarn add angularx-qrcode
           

Installation - Angular 4

NPM

npm install [email protected] --save
           

Yarn

yarn add [email protected]
           

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

轉載于:https://www.cnblogs.com/ckAng/p/8779455.html