时间戳

首页 > 解决方案 > 如何在 Angular 5 (Typescript) 中生成不同类型的二维码

typescript - 如何在 Angular 5 (Typescript) 中生成不同类型的二维码

问题描述

import {Component, Inject, Input, ElementRef, OnInit} from '@angular/core';
declare let QRCode: any;
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.scss']
})
export class QrcodeComponent implements OnInit {
  elementType : 'url' | 'canvas' | 'img' = 'url';
  value:any; 
  constructor() 
  {}

  ngOnInit() {
    this.value  = 'WWW.Google.com';
  }

}
<ngx-qrcode [qrc-element-type]="elementType " [qrc-value] = "value">
  </ngx-qrcode>

我需要生成二维码，我已经这样做了，但是想改变二维码的类型，这意味着。当我们扫描二维码时，联系方式将自动添加联系方式，地图二维码的“获取方向”，电子邮件类型将定向到我们的邮箱和 PDF 下载功能。

标签： typescriptangular5qr-code

解决方案

您不必更改内容的类型，假设您要编码一个包含电子邮件的值或另一个带有 url 的值，这不是这里的那种类型。只有用户的设备决定是否或如何处理 qrcode 的有效负载（值）。

此处的类型表示“呈现为 canvas-tag”或“呈现为 img-Tag”。

较长的部分：

如果您查看 lib 的源代码，elementType 被传递给一个 switch 语句，它本身（对于 url 和 img）默认为 img。由于包站点本身没有太多关于 elementType 的文档，因此我查看了名为qrcode的底层包上的示例

来自 qrcode 文档： toCanvas (canvas) =​​ 将 qr 代码符号绘制到画布上。toDataURL (img, url) = 返回二维码的字符串表示形式。目前仅适用于 SVG。

因此，无需深入挖掘库本身，它应该像编写以将编码的电子邮件作为 qrcode 一样简单，呈现在图像标签中。

<ngx-qrcode [qrc-element-type]="img" [qrc-value]="mailto:test@example.com"></ngx-qrcode>

由于 qrc-element-type 默认为“toDataURL”，您可能会忽略它（尚未对此进行测试）或需要一些附加的 ' 围绕您的值。

免责声明：我是另一个名为angularx-qrcode的二维码包的作者，它适用于 Angular4,5 和 6。

我在这里为 angular5/6 制作了一个工作演示应用程序： https ://github.com/Cordobo/angularx-qrcode-sample-app

推荐阅读