概要

SpreadJSでは、11種類のバーコードスパークラインがサポートされます。これらは単純な数式によって追加できます。次に、例を示します。

<p>ワークシートにバーコードを追加するには、次のような式を使用します。</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>各種のバーコードスパークライン式には、いくつかの共通のパラメータがあります。共通パラメータの定義は、次のとおりです。</p> <p><strong>value:</strong> バーコードのシンボルにエンコードする文字列</p> <p><strong>color:</strong> バーコードの色を表す色。デフォルト値は「rgb(0,0,0)」です。</p> <p><strong>backgroundColor:</strong> バーコードの背景色を表す色。デフォルト値は「rgb(255,255,255)」です。</p> <p><strong>showLabel:</strong> バーコードにラベルを表示する場合、ラベルテキストを表示するかどうかを指定する値</p> <p><strong>labelPosition:</strong> ラベルを表示する場合の、ラベルの位置を表す値</p> <p><strong>fontFamily:</strong> ラベルテキストのフォントファミリを表す文字列。デフォルト値は「sans-serif」です。</p> <p><strong>fontStyle:</strong> ラベルテキストのフォントスタイルを表す文字列。デフォルト値は「normal」です。</p> <p><strong>fontWeight:</strong> ラベルテキストのフォントの太さを表す文字列。デフォルト値は「normal」です。</p> <p><strong>textDecoration:</strong> ラベルテキストのフォントの文字装飾を表す文字列。デフォルト値は「none」です。</p> <p><strong>textAlign:</strong> ラベルテキストのフォントのテキスト配置を表す文字列。デフォルト値は「center」です。</p> <p><strong>textSize:</strong> ラベルテキストのフォントサイズを表す文字列。デフォルト値は「12px」です。</p> <p><strong>quietZoneLeft:</strong> 左クワイエットゾーンのサイズを表す値</p> <p><strong>quietZoneRight:</strong> 右クワイエットゾーンのサイズを表す値</p> <p><strong>quietZoneTop:</strong> 上クワイエットゾーンのサイズを表す値</p> <p><strong>quietZoneBottom:</strong> 下クワイエットゾーンのサイズを表す値</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 name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }