cnf-barcode

author: bugszhou | Email:[email protected] description: a barcode generator

本库基于JsBarcode核心库修改，仅生成svg格式图片和svg的DataURL文本(data:image/svg+xml;utf8,........)，主要用于非标准dom和无dom结构中使用。

• 支持生成不同颜色的一维码

查看JsBarcode

Introduction

cnf-barcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It has no dependencies when it is used for the web but works with jQuery if you are into that.

Demo

Supported barcodes:

• CODE128
  • CODE128 (automatic mode switching)
  • CODE128 A/B/C (force mode)
• EAN
  • EAN-13
  • EAN-8
  • EAN-5
  • EAN-2
  • UPC (A)
  • UPC (E)
• CODE39
• ITF
  • ITF
  • ITF-14
• MSI
  • MSI10
  • MSI11
  • MSI1010
  • MSI1110
• Pharmacode
• Codabar

getSvgDataURI

Use dataURI

let barcode = cnfBarcode("Hi!").getSvgDataURI();

Result:

data:image/svg+xml;utf8,........

Examples for browsers:

Simple example:

let barcode = cnfBarcode("Hi!").getSvg();
// or use DataURL
let barcode = cnfBarcode("Hi!").getSvgDataURI();

Example with options:

cnfBarcode("1234", {
  format: "pharmacode",
  lineColor: "#f4a460",
  width:4,
  height:40,
  displayValue: false
});

Result:

More advanced use case:

let barcode = cnfBarcode().options({font: "OCR-B"}) // Will affect all barcodes
      .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
      .blank(20) // Create space between the barcodes
      .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
      .render().getSvg();

Result:

Bower and npm:

You can also use Bower or npm to install and manage the library.

bower install cnf-barcode --save

npm install cnf-barcode --save

Options:

For information about how to use the options, see the wiki page.

| Option | Default value | Type | |--------|---------------|------| | format | "auto" (CODE128) | String | | width | 2 | Number | | height | 100 | Number | | displayValue | true | Boolean | | text | undefined | String | | fontOptions | "" | String | | font | "monospace" | String | | textAlign | "center" | String | | textPosition | "bottom" | String | | textMargin | 2 | Number | | fontSize | 20 | Number | | background | "#ffffff" | String (CSS color) | | lineColor | "#000000" | String (CSS color) | | margin | 10 | Number | | marginTop | undefined | Number | | marginBottom | undefined | Number | | marginLeft | undefined | Number | | marginRight | undefined | Number | | valid | function(valid){} | Function |