<p> </p>
<div class="info-box di" style="display: inline-block; vertical-align: top; color: #393939; background: #ffffff; border-radius: 5px; width: 358px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; overflow: hidden; font-family: Roboto, sans-serif;">
<div class="head " style="border-bottom: 1px solid #ababab; padding: 10px; font-size: 20px; font-family: "Roboto Slab", serif; background: #4b8b7f; color: #ffffff;">Hello world</div>
<div class="body" style="margin: 5px 15px;">
<h3>HTML:</h3>
<pre style="max-width: 100%;"><code class="html hljs xml" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;"><span class="hljs-tag" style="color: #000080;"><<span class="hljs-name">svg</span> <span class="hljs-attr" style="color: #008080;">id</span>=<span class="hljs-string" style="color: #dd1144;">"barcode"</span>></span><span class="hljs-tag" style="color: #000080;"></<span class="hljs-name">svg</span>></span></code></pre>
<h3>Javascript:</h3>
<pre style="max-width: 100%;"><code class="javascript hljs" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;">JsBarcode(<span class="hljs-string" style="color: #dd1144;">"#barcode"</span>, <span class="hljs-string" style="color: #dd1144;">"Hi world!"</span>);</code></pre>
<h3>Result:</h3>
<svg class="barcode" data-value="Hi world!" height="142px" style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" version="1.1" viewbox="0 0 288 142" width="288px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g style="fill:#000000;" transform="translate(10, 10)"><rect height="100" width="4" x="0" y="0"></rect><rect height="100" width="2" x="6" y="0"></rect><rect height="100" width="2" x="12" y="0"></rect><rect height="100" width="4" x="22" y="0"></rect><rect height="100" width="2" x="32" y="0"></rect><rect height="100" width="2" x="36" y="0"></rect><rect height="100" width="2" x="44" y="0"></rect><rect height="100" width="4" x="54" y="0"></rect><rect height="100" width="2" x="60" y="0"></rect><rect height="100" width="4" x="66" y="0"></rect><rect height="100" width="4" x="72" y="0"></rect><rect height="100" width="4" x="80" y="0"></rect><rect height="100" width="8" x="88" y="0"></rect><rect height="100" width="2" x="100" y="0"></rect><rect height="100" width="2" x="104" y="0"></rect><rect height="100" width="2" x="110" y="0"></rect><rect height="100" width="8" x="118" y="0"></rect><rect height="100" width="2" x="128" y="0"></rect><rect height="100" width="2" x="132" y="0"></rect><rect height="100" width="2" x="138" y="0"></rect><rect height="100" width="8" x="144" y="0"></rect><rect height="100" width="4" x="154" y="0"></rect><rect height="100" width="2" x="162" y="0"></rect><rect height="100" width="2" x="166" y="0"></rect><rect height="100" width="2" x="176" y="0"></rect><rect height="100" width="2" x="186" y="0"></rect><rect height="100" width="4" x="192" y="0"></rect><rect height="100" width="4" x="198" y="0"></rect><rect height="100" width="4" x="206" y="0"></rect><rect height="100" width="4" x="212" y="0"></rect><rect height="100" width="2" x="220" y="0"></rect><rect height="100" width="2" x="228" y="0"></rect><rect height="100" width="4" x="236" y="0"></rect><rect height="100" width="4" x="242" y="0"></rect><rect height="100" width="6" x="252" y="0"></rect><rect height="100" width="2" x="260" y="0"></rect><rect height="100" width="4" x="264" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="134" y="122">Hi world!</text></g></svg></div>
</div>
<div class="info-box di" style="display: inline-block; vertical-align: top; color: #393939; background: #ffffff; border-radius: 5px; width: 358px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; overflow: hidden; font-family: Roboto, sans-serif;">
<div class="head" style="border-bottom: 1px solid #ababab; padding: 10px; font-size: 20px; font-family: "Roboto Slab", serif; background: #4b8b7f; color: #ffffff;">Example with options</div>
<div class="body" style="margin: 5px 15px;">
<h3>HTML:</h3>
<pre style="max-width: 100%;"><code class="html hljs xml" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;"><span class="hljs-tag" style="color: #000080;"><<span class="hljs-name">svg</span> <span class="hljs-attr" style="color: #008080;">id</span>=<span class="hljs-string" style="color: #dd1144;">"barcode"</span>></span><span class="hljs-tag" style="color: #000080;"></<span class="hljs-name">svg</span>></span></code></pre>
<h3>Javascript:</h3>
<pre style="max-width: 100%;"><code class="javascript hljs" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;">JsBarcode(<span class="hljs-string" style="color: #dd1144;">"#barcode"</span>, <span class="hljs-string" style="color: #dd1144;">"1234"</span>, {
format: <span class="hljs-string" style="color: #dd1144;">"pharmacode"</span>,
lineColor: <span class="hljs-string" style="color: #dd1144;">"#0aa"</span>,
width: <span class="hljs-number" style="color: #008080;">4</span>,
height: <span class="hljs-number" style="color: #008080;">40</span>,
displayValue: <span class="hljs-literal" style="color: #008080;">false</span>
});</code></pre>
<h3>Result:</h3>
<svg class="barcode" data-displayvalue="false" data-height="40" data-linecolor="#0aa" data-value="1234" data-width="4" height="62px" style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" version="1.1" viewbox="0 0 248 62" width="248px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g style="fill:#0aa;" transform="translate(10, 10)"><rect height="40" width="8" x="0" y="0"></rect><rect height="40" width="4" x="12" y="0"></rect><rect height="40" width="12" x="24" y="0"></rect><rect height="40" width="4" x="44" y="0"></rect><rect height="40" width="8" x="52" y="0"></rect><rect height="40" width="12" x="68" y="0"></rect><rect height="40" width="4" x="88" y="0"></rect><rect height="40" width="4" x="104" y="0"></rect><rect height="40" width="8" x="112" y="0"></rect><rect height="40" width="4" x="132" y="0"></rect><rect height="40" width="4" x="144" y="0"></rect><rect height="40" width="16" x="156" y="0"></rect><rect height="40" width="8" x="176" y="0"></rect><rect height="40" width="12" x="196" y="0"></rect><rect height="40" width="4" x="212" y="0"></rect><rect height="40" width="8" x="220" y="0"></rect></g></svg></div>
</div>
<div class="info-box di" style="display: inline-block; vertical-align: top; color: #393939; background: #ffffff; border-radius: 5px; width: 358px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; overflow: hidden; font-family: Roboto, sans-serif;">
<div class="head" style="border-bottom: 1px solid #ababab; padding: 10px; font-size: 20px; font-family: "Roboto Slab", serif; background: #4b8b7f; color: #ffffff;">Declare options in HTML</div>
<div class="body" style="margin: 5px 15px;">
<h3>HTML:</h3>
<pre style="max-width: 100%;"><code class="html hljs xml" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;"><span class="hljs-tag" style="color: #000080;"><<span class="hljs-name">svg</span> <span class="hljs-attr" style="color: #008080;">class</span>=<span class="hljs-string" style="color: #dd1144;">"barcode"</span>
<span class="hljs-attr" style="color: #008080;">jsbarcode-format</span>=<span class="hljs-string" style="color: #dd1144;">"upc"</span>
<span class="hljs-attr" style="color: #008080;">jsbarcode-value</span>=<span class="hljs-string" style="color: #dd1144;">"123456789012"</span>
<span class="hljs-attr" style="color: #008080;">jsbarcode-textmargin</span>=<span class="hljs-string" style="color: #dd1144;">"0"</span>
<span class="hljs-attr" style="color: #008080;">jsbarcode-fontoptions</span>=<span class="hljs-string" style="color: #dd1144;">"bold"</span>></span>
<span class="hljs-tag" style="color: #000080;"></<span class="hljs-name">svg</span>></span></code></pre>
<h3>Javascript:</h3>
<pre style="max-width: 100%;"><code class="javascript hljs" style="border-radius: 3px; border: 1px solid #e0e0e0; font-family: "Roboto Mono", monospace; font-size: 12px; display: block; overflow-x: auto; padding: 9px; color: #333333; background: #f8f8f8;">JsBarcode(<span class="hljs-string" style="color: #dd1144;">".barcode"</span>).init();</code></pre>
<h3>Result:</h3>
<svg class="barcode" data-fontoptions="bold" data-format="upc" data-textmargin="0" data-value="123456789012" height="140px" style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" version="1.1" viewbox="0 0 242 140" width="242px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g style="fill:#000000;" transform="translate(10, 10)"><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="start" x="0" y="120">1</text></g><g style="fill:#000000;" transform="translate(26, 10)"><rect height="110" width="2" x="0" y="0"></rect><rect height="110" width="2" x="4" y="0"></rect><rect height="110" width="4" x="10" y="0"></rect><rect height="110" width="2" x="18" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="10" y="130"></text></g><g style="fill:#000000;" transform="translate(46, 10)"><rect height="100" width="2" x="4" y="0"></rect><rect height="100" width="4" x="10" y="0"></rect><rect height="100" width="8" x="16" y="0"></rect><rect height="100" width="2" x="26" y="0"></rect><rect height="100" width="2" x="30" y="0"></rect><rect height="100" width="4" x="38" y="0"></rect><rect height="100" width="4" x="44" y="0"></rect><rect height="100" width="2" x="54" y="0"></rect><rect height="100" width="2" x="58" y="0"></rect><rect height="100" width="8" x="62" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="35" y="120">23456</text></g><g style="fill:#000000;" transform="translate(116, 10)"><rect height="110" width="2" x="2" y="0"></rect><rect height="110" width="2" x="6" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="5" y="130"></text></g><g style="fill:#000000;" transform="translate(126, 10)"><rect height="100" width="2" x="0" y="0"></rect><rect height="100" width="2" x="8" y="0"></rect><rect height="100" width="2" x="14" y="0"></rect><rect height="100" width="2" x="20" y="0"></rect><rect height="100" width="6" x="28" y="0"></rect><rect height="100" width="2" x="36" y="0"></rect><rect height="100" width="6" x="42" y="0"></rect><rect height="100" width="2" x="52" y="0"></rect><rect height="100" width="4" x="56" y="0"></rect><rect height="100" width="4" x="64" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="35" y="120">78901</text></g><g style="fill:#000000;" transform="translate(196, 10)"><rect height="110" width="4" x="0" y="0"></rect><rect height="110" width="4" x="6" y="0"></rect><rect height="110" width="2" x="14" y="0"></rect><rect height="110" width="2" x="18" y="0"></rect><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="middle" x="10" y="130"></text></g><g style="fill:#000000;" transform="translate(216, 10)"><text style="font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold; font-stretch: normal; font-size: 20px; line-height: normal; font-family: monospace;" text-anchor="end" x="15" y="120">2</text></g></svg></div>
</div>
<p> </p>
<table style="margin: 0px auto; border-collapse: collapse; font-family: "Roboto Mono", monospace; font-size: 14px; color: #101918; text-align: center;">
<thead style="border-radius: 5px 0px;">
<tr>
<th style="padding: 10px; background: #4b8b7f; color: #ffffff; font-size: 16px; font-family: "Roboto Slab", serif; border-radius: 5px 0px 0px; text-align: left;">Name</th>
<th style="padding: 10px; background: #4b8b7f; color: #ffffff; font-size: 16px; font-family: "Roboto Slab", serif;">Supported barcodes</th>
<th style="padding: 10px; background: #4b8b7f; color: #ffffff; font-size: 16px; font-family: "Roboto Slab", serif; border-radius: 0px 5px 0px 0px; text-align: right;">CDN / Download</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px; text-align: left;"><em>All</em></td>
<td style="padding: 10px;"><em>All the barcodes!</em></td>
<td style="padding: 10px; text-align: right;"><em><a class="jsdelivr-download" filename="JsBarcode.all.min.js" href="/472584d2003b40a0/gz/JsBarcode.all.min.js" path="/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr all barcodes">JsBarcode.all.min.js</a></em></td>
</tr>
<tr style="background: #deecea;">
<td style="padding: 10px; text-align: left;">CODE128</td>
<td style="padding: 10px;">CODE128 (auto and force mode)</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.code128.min.js" href="/472584d2003b40a0/gz//JsBarcode.code128.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr code128">JsBarcode.code128.min.js</a></td>
</tr>
<tr>
<td style="padding: 10px; text-align: left;">CODE39</td>
<td style="padding: 10px;">CODE39</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.code39.min.js" href="/472584d2003b40a0/gz/JsBarcode.code39.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr code39">JsBarcode.code39.min.js</a></td>
</tr>
<tr style="background: #deecea;">
<td style="padding: 10px; text-align: left;">EAN / UPC</td>
<td style="padding: 10px;">EAN-13, EAN-8, EAN-5, EAN-2, UPC (A)</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.ean-upc.min.js" href="/472584d2003b40a0/gz/JsBarcode.ean-upc.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr ean/upc">JsBarcode.ean-upc.min.js</a></td>
</tr>
<tr>
<td style="padding: 10px; text-align: left;">ITF</td>
<td style="padding: 10px;">ITF, ITF-14</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.itf.min.js" href="/472584d2003b40a0/gz/JsBarcode.itf.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr itf">JsBarcode.itf.min.js</a></td>
</tr>
<tr style="background: #deecea;">
<td style="padding: 10px; text-align: left;">MSI</td>
<td style="padding: 10px;">MSI, MSI10, MSI11, MSI1010, MSI1110</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.msi.min.js" href="/472584d2003b40a0/gz/JsBarcode.msi.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr msi">JsBarcode.msi.min.js</a></td>
</tr>
<tr>
<td style="padding: 10px; text-align: left;">Pharmacode</td>
<td style="padding: 10px;">Pharmacode</td>
<td style="padding: 10px; text-align: right;"><a class="jsdelivr-download" filename="JsBarcode.pharmacode.min.js" href="/472584d2003b40a0/gz/JsBarcode.pharmacode.min.js" path="/barcodes/" style="text-decoration-line: none; border-bottom: 1px dotted #777777;" title="jsdelivr pharmacode">JsBarcode.pharmacode.min.js</a></td>
</tr>
</tbody>
</table>
<p> </p>
Hello world
HTML:
<svg id="barcode"></svg>
Javascript:
JsBarcode("#barcode", "Hi world!");
Result:
Example with options
HTML:
<svg id="barcode"></svg>
Javascript:
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});
Result:
Declare options in HTML
HTML:
<svg class="barcode"
jsbarcode-format="upc"
jsbarcode-value="123456789012"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
Javascript:
JsBarcode(".barcode").init();
Result:
|