zoukankan      html  css  js  c++  java
  • Angular生成二维码

    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

    AttributeTypeDefaultDescription
    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

  • 相关阅读:
    哲学的初步认识7
    随机法解决TSP问题
    哲学的初步认识6
    dfs+dp思想的结合------hdu1078
    动态规划3-------poj1050
    动态规划2-----hdu1069
    动态规划1-----------poj1080
    js中Math.round、parseInt、Math.floor和Math.ceil小数取整小结【转】
    美术馆
    无刷新评论
  • 原文地址:https://www.cnblogs.com/ckAng/p/8779455.html
Copyright © 2011-2022 走看看