在 Angular 2 nativescript 中生成条形码答案

【问题标题】：Generate barcode in angular 2 nativescript在 Angular 2 nativescript 中生成条形码
【发布时间】：2017-02-08 12:57:42
【问题描述】：

我需要根据 angular2 nativescript 中的一些字符串数据生成条形码。请帮助我实现这一目标。

【问题讨论】：

标签： angular2-nativescript

【解决方案1】：

你或许应该试试这个nativescript-zxing。该插件允许您读取条形码、二维码等，并根据提供的字符串创建它们。查看文档以获取更多信息。祝你有美好的一天！

【讨论】：

【解决方案2】：

如果您只需要生成条码而不扫描它，您可以使用条码字体并将其设置到您的标签上，步骤如下：

找到适合您需要的条形码字体，并将字体文件复制到您应用中的/font 文件夹中。 This font 是个不错的选择。
在您的 app.css 中添加一个新类，将 font-family 设置为条形码字体：

.barcode {
    font-family: free3of9 /* Replace with the actual name of your font, free3of9 is the name of the font above */
}

添加标签，将文本设置为您希望条形码表示的值，并将类设置为您的 css 类。为了正常工作，您需要为文本添加前缀和后缀 *。例如，如果您希望条形码读取 12316516132，您的标签应如下所示：

&ltLabel text="*12316516132*" class="barcode"></Label>

这比安装插件更有效，因为它占用的应用程序资源非常少。

【讨论】：

【解决方案3】：

字体对我来说不是一个好的选择，因为我无法控制它的宽度/高度。 nativescript-zxing 与 nativescript-barcodescanner 不兼容。所以，我已经完成了接下来的事情

import { DOMImplementation, XMLSerializer } from 'xmldom';
import * as JsBarcode from 'jsbarcode';
const xmlSerializer = new XMLSerializer();
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

JsBarcode(svgNode, 'test', { xmlDocument: document });

const svgText = xmlSerializer.serializeToString(svgNode);
const buffer = new Buffer(svgText);
const src = `data:image/svg+xml;base64,${buffer.toString('base64')}`;

现在src可以从插件nativescript-svg传递给SVGImage

【讨论】：