Angular6二维码组件

蔚落 2023-02-21 14:19 100阅读 0赞

**需求：**

Angular6框架下可以根据内容生成对应的二维码。

**方案：**

这个我们直接使用 angular2-qrcode插件就可以。

**具体使用过程：**

**1、首先安装 angular2-qrcode**

npm install angular2-qrcode

**2、其次，在app.module.ts中引入QRCodeModule 模块**

import { NgModule } from '@angular/core';
    import { QRCodeModule } from 'angular2-qrcode';
    
    ...
    
    @NgModule({
        imports: [
            QRCodeModule,
            ...
        ]
    })

**3、然后，在html模板文件中定义二维码展现的元素**

**4、参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>Attribute</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>String</td> 
   <td>''</td> 
   <td>Your data string</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>Number</td> 
   <td>100</td> 
   <td>This is the height/width of your QR Code component</td> 
  </tr> 
  <tr> 
   <td>level</td> 
   <td>String</td> 
   <td>'L'</td> 
   <td>QR Correction level ('L', 'M', 'Q', 'H')</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>String</td> 
   <td>'white'</td> 
   <td>The color for the background</td> 
  </tr> 
  <tr> 
   <td>backgroundAlpha</td> 
   <td>Number</td> 
   <td>1.0</td> 
   <td>The opacity of the background</td> 
  </tr> 
  <tr> 
   <td>foreground</td> 
   <td>String</td> 
   <td>'black'</td> 
   <td>The color for the foreground</td> 
  </tr> 
  <tr> 
   <td>foregroundAlpha</td> 
   <td>Number</td> 
   <td>1.0</td> 
   <td>The opacity of the foreground</td> 
  </tr> 
  <tr> 
   <td>mime</td> 
   <td>String</td> 
   <td>'image/png'</td> 
   <td>The mime type for the output image</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>Number</td> 
   <td>null</td> 
   <td>The padding around the QR Code</td> 
  </tr> 
  <tr> 
   <td>canvas</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>Will output a canvas element if true</td> 
  </tr> 
 </tbody> 
</table>

结束。

参考文档：[https://www.npmjs.com/package/angular2-qrcode][https_www.npmjs.com_package_angular2-qrcode]

[https_www.npmjs.com_package_angular2-qrcode]: https://www.npmjs.com/package/angular2-qrcode