Overview

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

To add a barcode to worksheet, you can using a simple barcode formula, for example: There are some common parameters of the barcode sparkline formulas, which are defined as follows: value: this string represents the encode on the symbol of barcode. color: (default value is 'rgb(0,0,0)') this color represents the barcode color. backgroundColor: (default value is 'rgb(255, 255, 255)') this color represents the barcode backgroundColor. showLabel: this value indicates whether to show the label text if the barcode as a label. labelPosition: this value represents the label position if the label is shown. fontFamily: (default value is 'sans-serif') this string represents the label text fontFamily. fontStyle: (default value is 'normal') this string represents the label text fontStyle. fontWeight: (default value is 'normal') this string represents the label text fontWeight. textDecoration: (default value is 'none') this string represents the label text textDecoration. textAlign: (default value is 'center') this string represents the label text textAlign. textSize: (default value is '12px') this string represents the label text textSize. quietZoneLeft: this value represents the size of left quiet zone. quietZoneRight: this value represents the size of right quiet zone. quietZoneTop: this value represents the size of top quiet zone. quietZoneBottom: this value represents the size of bottom quiet zone.
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }