QRCode二维码

何时使用#

当需要将链接转换成为二维码时使用。

引入模块#

import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';

代码演示

最简单的用法。

expand codeexpand code
      加载中
    

二维码过期

已扫描

通过 nzStatus 的值控制二维码的状态,提供了 activeexpiredloadingscanned 四个值。

expand codeexpand code
      加载中
    

自定义 QR 码的填充。

expand codeexpand code
      加载中
    

自定义二维码的背景颜色。

expand codeexpand code
      加载中
    

实现下载二维码。

expand codeexpand code
      加载中
    

带有 icon 的二维码。

expand codeexpand code
      加载中
    
NgZorro
success

可以通过 nzStatusRender 的值控制二维码不同状态的渲染逻辑。

expand codeexpand code
      加载中
    

通过设置 nzColor 自定义二维码颜色。

expand codeexpand code
      加载中
    

通过设置 nzLevel 调整二维码容错。

expand codeexpand code
      加载中
    

API#

nz-qrcode#

参数说明类型默认值
[nzValue]扫描后的地址string-
[nzColor]二维码颜色string#000
[nzBgColor]二维码背景颜色string#FFFFFF
[nzSize]二维码大小number160
[nzPadding]二维码填充number | number[]0
[nzIcon]二维码中 icon 地址string-
[nzIconSize]二维码中 icon 大小number40
[nzBordered]是否有边框booleantrue
[nzStatus]二维码状态'active'|'expired' |'loading'active
[nzStatusRender]自定义状态渲染器TemplateRef<void> | string-
[nzLevel]二维码容错等级'L'|'M'|'Q'|'H'M
(nzRefresh)点击"点击刷新"的回调EventEmitter<string>-

注意#

二维码无法识别#

nzValue 保守的上限为 738 或更少的字符串。如果使用容错等级,nzValue 上限会降低。

关于二维码容错等级#

容错等级也叫容错率,就是指二维码可以被遮挡后还能正常扫描,而这个能被遮挡的最大面积就是容错率。

通常情况下二维码分为 4 个容错等级:L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约 30% 错误。并不是所有位置都可以缺损,像最明显的三个角上的方框,直接影响初始定位。中间零散的部分是内容编码,可以容忍缺损。当二维码的内容编码携带信息比较少的时候,也就是链接比较短的时候,设置不同的容错等级,生成的图片不会发生变化。

有关更多信息,可参阅相关资料:https://www.qrcode.com/zh/about/error_correction