Overview

There are 11 types of barcode sparklines supported in SpreadJS, and they can be added using a simple formula.

<p>To add a barcode to worksheet, you can using a simple barcode formula, for example:</p> <pre><code class="hljs js language-js"> sheet.setFormula(<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-string">'=BC_EAN8(value, color, backgroundColor, showLabel, labelPosition, fontFamily, fontStyle, fontWeight, textDecoration, fontTextAlign, fontSize, quietZonLeft, quietZoneRight, quietZoneTop, quietZoneBottom)'</span>) </code></pre> <p>There are some common parameters of barcode sparkline formulas, which are defined as follows:</p> <p><strong>value:</strong> this string represents the encode on the symbol of barcode.</p> <p><strong>color:</strong> (default value is 'rgb(0,0,0)') this color represents the barcode color.</p> <p><strong>backgroundColor:</strong> (default value is 'rgb(255, 255, 255)') this color represents the barcode backgroundColor.</p> <p><strong>showLabel:</strong> this value indicates whether to show the label text if the barcode as a label.</p> <p><strong>labelPosition:</strong> this value represents the label position if the label is shown.</p> <p><strong>fontFamily:</strong> (default value is 'sans-serif') this string represents the label text fontFamily.</p> <p><strong>fontStyle:</strong> (default value is 'normal') this string represents the label text fontStyle.</p> <p><strong>fontWeight:</strong> (default value is 'normal') this string represents the label text fontWeight.</p> <p><strong>textDecoration:</strong> (default value is 'none') this string represents the label text textDecoration.</p> <p><strong>textAlign:</strong> (default value is 'center') this string represents the label text textAlign.</p> <p><strong>textSize:</strong> (default value is '12px') this string represents the label text textSize.</p> <p><strong>quietZoneLeft:</strong> this value represents the size of left quiet zone.</p> <p><strong>quietZoneRight:</strong> this value represents the size of right quiet zone.</p> <p><strong>quietZoneTop:</strong> this value represents the size of top quiet zone.</p> <p><strong>quietZoneBottom:</strong> this value represents the size of bottom quiet zone.</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {sheetCount: 1}); initSpread(spread); }; var FORMULA = 'BC_PDF417'; function initSpread(spread) { var sheet = spread.getSheet(0); spread.suspendPaint(); _initBasicSheet(sheet); spread.resumePaint(); } function _initBasicSheet(sheet) { sheet.name('customSheet'); _setData(sheet); _setStyle(sheet); var types = [ 'BC_QRCODE', 'BC_DataMatrix', 'BC_PDF417', 'BC_EAN8', 'BC_EAN13', 'BC_CODE39', 'BC_CODE93', 'BC_CODE49', 'BC_CODE128', 'BC_CODABAR', 'BC_GS1_128' ]; for (var i = 0; i < types.length; i++) { sheet.setFormula(i + 3, 3, '=' + types[i] + '(C' + (i + 4) + ')'); // change color and backgroudColor sheet.setFormula(i + 3, 4, '=' + types[i] + '(C' + (i + 4) + ',"#fff","#000")'); } for (var i = 3; i < types.length; i++) { // change showLabel sheet.setFormula(i + 3, 5, '=' + types[i] + '(C' + (i + 4) + ',,,0)'); // change labelPosition sheet.setFormula(i + 3, 6, '=' + types[i] + '(C' + (i + 4) + ',,,,"top")'); } } function _setData(sheet) { var headers = [['Default', 'Change color and backgroudColor', 'Change showLabel', 'Change labelPosition']]; var dataArray = [ ['QR code', 'Policy:411'], ['Data Matrix', 'Policy:411'], ['PDF417', 6935205311092], ['EAN-8', 4137962], ['EAN-13', 6920312296219], ['Code39', 3934712708295], ['Code93', 6945091701532], ['Code49', 6901668002433], ['Code128', 465465145645], ['Codabar', 9787560044231], ['gs1128', 235465143135] ]; sheet.addSpan(1, 1, 2, 1); sheet.addSpan(1, 2, 2, 1); sheet.addSpan(1, 3, 1, 4); sheet.setValue(1, 1, 'Type'); sheet.setValue(1, 2, 'Number'); sheet.setValue(1, 3, 'Barcode'); sheet.setArray(2, 3, headers); sheet.setArray(3, 1, dataArray); } function _setStyle(sheet) { sheet.setColumnWidth(0, 20); for (var row = 3; row < 14; row++) { sheet.setRowHeight(row, 100); } for (var col = 1; col < 7; col++) { sheet.setColumnWidth(col, 200); } sheet .getRange(1, 1, 13, 6) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), {outline: true}); sheet .getRange(1, 1, 2, 6) .foreColor('#000') .backColor('#FFF3CE') .setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), {all: true}); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }