简介
在前端开发中，经常需要生成条形码以及二维码来满足业务需求。td-angular-barcode 是一个基于 Angular 的 npm 包，需要 Angular 版本 >= 4。它支持生成多种类型的条形码和二维码，包括 EAN-8，EAN-13，CODE128 等。
在本文中，我们将学习如何安装和使用 td-angular-barcode 。
安装
你可以通过 npm 安装 td-angular-barcode :
npm install td-angular-barcode --save
使用
引入 BARCODE_DIRECTIVES
在你的 Angular 应用中引入 BARCODE_DIRECTIVES ：
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------
-----------
------------- -
-- ---
-------------------
--
-- ---
--
------ ----- --------- - -使用 td-barcode 生成二维码
<svg td-barcode [value]="'my-value'" [format]="'qrcode'" [scale]="5"></svg>
这里我们使用 td-barcode 通过 QRCODE 格式生成一个带有 ‘my-value’ 字符串的二维码 。 scale 表示缩放大小，默认值是 2。
使用 td-barcode 生成 EAN13 条形码
<svg td-barcode [value]="'5901234123457'" [format]="'ean-13'" [scale]="3"></svg>
这里我们使用 td-barcode 通过 EAN13 格式生成一个条形码。 value 接受 ‘5901234123457’ 字符串， scale 表示缩放大小，默认值是 2。
使用 td-barcode 生成 CODE128 条形码
<svg td-barcode [value]="'CODE128 Demo'" [format]="'code-128'" [scale]="3"></svg>
这里我们使用 td-barcode 通过 CODE128 格式生成一个条形码。 value 接受 ‘CODE128 Demo’ 字符串， scale 表示缩放大小，默认值是 2。
深度学习
如果你想自定义 td-barcode 的样式，你可以使用 td-barcode 样式来直接控制它的背景颜色，前景颜色和边框颜色。你也可以控制线宽和线段宽度等。
{
--bc-bg-color: white;
--bc-fg-color: black;
--bc-bar-border-color: black;
--bc-bar-border-width: 1px;
--bc-bar-thickness: 25%;
}注意事项
请确保你的浏览器支持 SVG 。
总结
在这篇文章中，我们学习了如何使用 td-angular-barcode 通过 Angular 应用来生成条形码和二维码。我们还学习了如何通过调整 CSS 样式来自定义条形码和二维码的外观。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550d81e8991b448d2406